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Creating and processing the vedio files. 


Unit two: Designing and construction of the web site. 


"The questions of the First Unite (1), (2), (3) 


‘Lesson 1 


HTML language. 


General Revision (3), (4) 


Lesson 2 


Applied project to design a Web site. 


‘The questions of the Second Unite (1), (2), (3) 


Practical tests. 


- The Night before the Exam 


SIE 


Concepts and basics of Web 


To identify the content of website. 


ic Objectives 


By the end of this lesson, the students will be able to 


(1) Identify the concept of Website, Home Page, and Webpage. 

(2) Deduce that the website has more than webpage. 

(3) Deduce the content of webpage [Text, image, video, hyperlink, c] 
(4) Identify the concept of static webpage, 

(5) Identify the concept of Interactive webpage. 
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. Websites 


- A Website is a webpage or more, connected with each other, 
with a certain name and Web address. 


- The website can be visited on the computer or the cell phone. 


New ity m > 


- Define the website. 

- Define the Home page. x 

- Define the webpage. : 

- Deduce that the website consists of more than a webpage. 

* Upload the website of the ministry of Education: 
http:/www.moe.gov.eg 

* Discusses the followis 


: Website — Home page — Webpage 


-Itis a site on the internet that consists of a webpage or more, 
it is visited through a certain web address. 


e 


-It isa document with electronic content on the internet which 
can'be shown through a web browser. 


~ It is the opening page in the website through which other pages 
can be visited. 


Wi 


jonen 


* Components of the web page: 


- The web page includes texts, images, audio files, videos and 
hyperlinks. 


— ASG » 


~ Deduce the components of the webpage (text - images 
= sound - video - hyperlinks, ... etc.) | 

~ Deduce the types of data shown on the web page. 

- Deduce the components of the different types of web pages. 
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- The conitent of these page is previously prepared by the page 
developer. 

- The content doesn't change and can't be edited by the visitor. 

- It is designed by HTML code. 


- Open a website and roam its pages. 

- Identify the Static web page components, which 
don't change each time you visit the page. 

- It can have texts, images, sound or video clips, which 
can't be modified. 


[2] Interactive Web Page | 


- It is a webpage that has a content allowing the visitors to 
interact with and manipulate. 
- It is designed by HTML, JavaScript, PHP and others. 


لقا 


Examples of interactive web pages: 


- The E-learning page on the Ministry of Education Website. 


= ترد 


- Requires deciding the stage, and school term to be able to see 
the curriculum or the text book of a certain school year. 

- Fill in the form, click "search". 

- The Contact us page on the Ministry of Education Website. 


- Requires filling some 
information. 


- Fill in thé required 
information and click 


hüp//www.sisgov.eg — - http://www.ahram.org.eg 
.- Identify the homepage. 
-Identify the content of the website (text, images, video or 
hyperlinks ... ete). 
- Identify the static web page. - Identify the interactive webpage. 
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* Website: It is a site on the internet that consists of a webpage or more, 
it is visited through a certain web address. 

* Web Page: It is a document with electronic content on the intemet which 

can be shown through a web browser. 
* Home Page: It is the opening page in the website through which other 
pages can be visited. 

* Static Webpage: 

~ The content of these page is previously prepared by the page developer. 

- The content doesn't change and can't be edited by the visitor. 

= It is designed by HTML code. 

* Interactive Webpage: It is a webpage that has a content allowing the 

visitors to interact with and manipulate, 
* It is designed by HTML, JavaScript, PHP and others. 


Components of the web page: 
* The web page includes texts, images, audio files, videos and hyperlinks. 
Examples of interactive web pages: Li 


* The e-learning page on the Ministry of Education website. 
* The contact us page on the Ministry of Education Website. 


First: Put each of the following concept in its right place to get 
the correct sentence: 
(Home Page - Static — Interactive — Web Page - Web site) 
is a webpage that has a content allowing the visitors to 
interact with and manipulate. 
.. is the opening page in the website through which other 
pages can be visited, 


(Em) 


© The can be visited on the computer or the cell phone. 
content doesn't change and can't be edited by the 


is a document with electronic content on the internet which 
can be shown through a web browser. 


= Second: Choose the correct answer from between the brackets: 

o.. is designed by HTML, JavaScript, PHP and others. 
(Home Page — Website — interactive web page) 

is a webpage or more, connected with each other, 


with a certain name and Web address. 
(Home Page — Website — interactive web page) 


is the main page in the website through which other 
pages can be visited. 
(Home Page — Website — interactive web page) 
is designed by HTML code. 
(Web Page elements - Web Site - Static web page) 
‘© The components of the .. (text - images - sound - video - 
Hyperlinks). 
(Web page - Web Site - Static web page) 


- Third: Put (>) for right answer and (x) for wrong answer: 
© Web Site is a document with electronic content on the internet 


which can be shown through a web browser. c 3 
© Home Page is a webpage or more, connected with each other, 
with a certain name and Web address. S 
‘© Components of the web page, [text - images - sound - video - 
Hyperlinks]. C 2 
© The Interactive web page content is prepared by the page 
developer. It is designed by HTML code. [i ) 


‘© The website can be visited on the computer or the cell phone. 
( ) 


[m 
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Stages of designing and creating a Website 


Stages of 
designing and creating a Website 


ning and creatin: SA 


- Designing and creating a website goes through stages that can 
be set here: 


© The first stage: planning to create a website, 

© The second stage: design the web pages. 

© The third stage: prepare and develop the web pages. 
© The fourth stages: implement the web pages. 

© The fifth stage: publish the website on the internet. 


ly the end of this lesson, the students will be able to 


— 
* Demonstrates the stages of designing and creating a website. 


(1) In this stage, we draw a simple diagram of the web pages of 
the website, the homepage and the connected pages 

(2) Decide the information and data to be included as data or 
service according to the need. 


12 13 


CamScanner ب‎ Lis الممسوحة‎ 


uestions €) 


Question 1: Complete the following: 
(1) The website. 


(2) The webpage is . 


(3) The Homepage is... 


(5) The interactive webpage is . 


Question 2: Open this website http://www.egynews.net 
- Identify the homepage. 
= State the contents of the homepage [text, images, video, 
hyperlinks, ...] 
- What type is the homepage: static or interactive? 
- Go through the site pages and identify the page contents, then 
decide if it is a static or an interactive web page. 


Home work Sie 


i| Static Webpage |a see ime audio files, videos 


Tt isa site on the internet that consists 
2| Interactive Webpage | B | of a webpage or more, it is visited 
through a certain web address. 


Components of the es 
3 Ems pz C | It is designed by HTML code. 
Tt is a document with electronic. 
4 Website. D | content on the internet which can be 
shown through a web browser. 
It is designed by HTML, 
s Tang E | JavaScript, PHP and others. 
= Second: [A]; wing: 


O it is a document with clectronic content on the internet which can 
be shown through a web browser. 


© it is a webpage or more, connected with each other, with a certain 
name and Web address. 


© Text, images, sound, video, and Hyperlinks. 


itis content is prepared by the page developer, It is designed by 
HTML code. 


© The content doesn’t change and can't be edited by the visitor. 


IB]: Make a comparison between: 


active Webpage Static Webp: 


Go 


CamScanner ب‎ Lis الممسوحة‎ 


CIVIL: 
- Plan a website with the following: 
-Title and subject to be dealt with in the website. 


- The number of pages [the homepage and the web pages 
- Plan the diagram of the homepage and other web pages, decide 
the information and data to be shown. j 


* Second stage: Design the Webpage. 


* Design the web page is the most important stages where: 

(1) We design the format and shape of the homepage and other 
pages. 

(2) The different format types are designed, the color, the 
background, the font size and type, place of putting text, 
images and video clips. 

(3) Decide the different hyperlinks inside the same page and 
connected with other pages in the website. 


> 
- Design the shape of the home page and the other | 
web pages. 
- Design the hyperlinks. 
= Design the places to put text, images and video clips on the 
page. 


A diagram for designing a website (My School yii) 


G4 


i " 
* Third stage: Prepare and develop 


(1) Prepare the text which will be added to the page using a text 
editor program and save it in a folder. 


(2) Prepare the image files and save them in a folder. 
(3) Prepare the video and sound files and save them in a folder. 


Prepare the text files 


* Select the needed text files for each web page. 

* Search for the suitable text files to be used in the web page, 

* The search for the text files can be done through the internet 
or asking the school administration about information like; 


- When did the school open? 
~ The school address. 


~ The telephone number of the school. 
- Vision and missioh of the school. 


[Prepare the image files ] 

* Take photos of the school, the classes, the playground ¢ 
and labs. 

* Collect the photos of school activities and competitions, 
photos of certificates and prizes which the school won, 

* Save the images in a folder in a drive. = 


ELM T 


Gs 
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* Take photos using a digital camera or a mobile phone camera. 
* Collect the images about the activities which the students do. 
+ collect the images of the school competitions at 

school or at the educational administration [Idara]. 
* Collect images about the certificates and prizes 

which the school won. 


» Input these images to the computer using a scanner, 
mobile data cable or any other way. 
* Create a folder “Pro1” to save the images in it. 


EEXercise 


- Identify some image file types. 
- Search the internet for images with the extension (jpg — gif — 
bmp - png) and discuss the difference between each type. 


Prepare the sound and video files 
* This will be discussed in the following lessons. 


# Fourth stage-| Implementation 


(1) We change the paper design into web page to be shown and 
visited on the internet with an internet browser program. 
(2) Input the data, text, images, and videos and so on. 
(3) Create the necessary hyperlinks to connect the different. 
pages and facilitate browsing the site. 
- This is done using HTML codes. 


ag 


* Fifth stage:[ Publish on the internet: 


* A web address is taken. 
* The storage capacity is decided to save on one of the servers, 
Publish the site on the intemet. 


- Designing and creating websites has many stages: 


* Stage one: planning. 

~ Set up a simple diagram on paper for the homepage and the site pages. 

= Decide the data and information to be used in the webpage. 

* Stage two: Design the format and shape of the homepage and web pages 
~ Design the page format, 

~ Select the background color. 

~ Select the places to add text files, images, videos and sound files, 

~ Select the hyperlinks connecting the pages. 
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* Stage Three: Prepare and develop. 
Design the web page is the most important stages where: 

- Prepare the text which will be added to the page using a text editor 
program and save it in a folder. 

- Prepare the image files and save them in a folder. 

- Prepare the video and audio files and save them in a folder. 

* Stage Four: Implementation. 

- This is done using a programming language and HTML codes. 

- Convert the design into webpage. 

- Input the data and files. 

~ Create the hyperlinks. 

* Stage Five: Publish the website on the intemet. 

- Choose a (ile, select a web address. 

- Decide the storage capacity on a server. " 

- Publish on the internet. 


- First: Re-Arrange the next. Stages of designing and creating 
a Website: 

(O) Design the format and:shape of the homepage and web 

pages. 

) Prepare and develop. 

) Planning. 

) Publish the website on the internet. 

) Implementation. 


Second: Put (7) for right answer and (x) for wrong answer: 


© The stage of implementation is the last stage of design and create 
a Web Site. t a 


© We can take photos of the school using a digital camera or Mobile. 


( ) 
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© Convert the design into webpage, this is done using a 
programming language and HTML codes. ¢ 9 

Planning to create the site is the second stage of design and create 
a Web Site. 62 


© Design the web page is the most important stages where convert 
the design into webpage. C D 

@ Planning to create a website that requires a sketch on paper for 
the site's home page and the rest of the pages of the site. (  ) 

@ Planning for creating the site requires, select data and information 
contained in each Web page. D 3 


© Implementation is the last stage to create a website. c 2 


- Third: Choose the correct answers: 
© Publish the website on the internet: 
[A] Converter the foliar design to Web pages. 
[B] Decide the storage capacity on a server. 
[C] Prepare the image files and save them in a folder. 
[D] Plan to create a website. 


D Using a programming language and HTML codes: 
[A] Select the background color. 
[B] Select the places to add text files, images, videos and sound files. 
[C] Create the hyperlinks connecting the pages. 
[D] None of the above, 


© Planning to create a website means: 
[A] Set up a simple diagram on paper for the homepage and the site 
pages. 
[B] Input the data and Tiles. 
[C] Create the hyperlinks. . 
[D] All of the above, 


لطا 
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Stage of selecting the hyperlinks between the main page and the 
other web pages: 
[A] Implementation, 
[B] Publishing. 
[C] Design the format and shape of the homepage and web pages. 
[D] Planning to create the web site. 
e the first stage of designing and creating a website. 
[A] Implementation. 
[B] Publishing. 
[C] Web page design of the site. 
[D] Planning. 
© is the last stage of designing and creating a website. 
[A] Planning to build the site. 
[B] Publishing. 
[C] Web page design of the site, 
[D] Implementation of web pages. 


| 


Question 1: Complete: 
- First, designing and creating a website goes through stages 


kr Im tne stage of implementation we: 


(3). 


Home work == 


o . the first stage of create the website. 

© The second stage to ..... ... the homepage and web pages. 
~-~- the image files and save them in a folder. 

this is done using a programming language and 


- the website on the internet, 


. displays information for viewing only, and can't be 
edited by the visitor. 
(a) Interactive web page. (b) Static web page. 
(c) Web page. (d) Website. 
© ...............is a document with electronic content on the internet 
which can be shown through a web browser, 
(a) Interactive web page. (b) Static web page. 
(c) Web page. (d) Main page. 
e consists of a webpage or more, it is visited through 
a certain web address. 


(a) Interactive web page. (b) Website. 
(c) Web page. (d) Static web page. 
o is designed by HTML, JavaScript, PHP and others. 
(a) Web page. (b) Website, 
(c) Static webpage. (d) Interactive webpage. 
e - are texts, images, audio files, videos and hyperlinks. 
(a) Components of the web page. (b) Web site. 


(c) Interactive web page. (d) Static web page. 
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2 Create and edit audio files 


IRS] How can we create a sound file? 


Lesson (3) 


\ 


| 


= Create and process audio files through one of the related programs. 


By the end of this lesson, the students will be able to: dup 


(1) Identify creating and audio processing program. 

(2) Setup and prepare (data / software components and material) to 
create the audio, 

(3) Use Audacity program to create and process audio files. ei 

(4) Edit (Add Effect / cut and paste / delete) in the audio cli 

(5) Identify appropriate extensions of audio files. 


Create and edit audio files 


© There are many programs that are used on dealing with audio 
files. 


* They are software programs that enable the user to create and 
process audio files in an easy and proper way. 

* They contain tools that creating and processing 
audio files. 


|| Creating an audio file: 


- To create an audio file, we need a sound processing software. 


- You can create an audio file containing audio clips and the 
words required as well as adding different effects on the audio, 
and then save the audio in a file. 


- Create an audio file named (my school): 

- We are going to create an audio file with the name "my school" 
with a comment audio to a project or be included in the video 
clip for the school. 

* Next steps for creating an audio file: 


First: The sctup and processing to create an audio file. 
Second: The implementation stage. 
Third: Modifying the sound (or audio clip). 

Fourth: Export an audio file with an appropriate extension. 
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The setup and processing to create an audio file 


- Prepare for the required steps to create an audio file 
1o a school, as e 


(1) Preparing for collecting data about school, as 
follows: 


* The competitions the school shared in. 
* The ranks won in those competitions. 
* The summer activities the school provides. 


* School trips and various activities provided by the school. 
- Type the data collected about the school in one of the text 


editing programs, iom 
- Save the text data in a text file. 
(2) Preparation and processing of software and 
hardware components: 
* Through the school computer lab, make sure 
you install a program and create audio 
processing on computers laboratory. N 


* Make sure your microphone is plugged to your computer. 
* Make sure that the speakers is connected to the computer. 


> 
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Setup and preparing to create an audio file stage include: 

- All the data that will be audio recorded. 

- Make sure of the software components (install one of the 
Programs of creating and audio processing on computers in 
the lab). 

- Make sure of the software components (install one of the 
programs of creating and audio processing on computers in 
the lab). 


- Ensure the hardware components (connecting the microphone 
"Mic" to a computer). 


The Implementation 


- Create an audio file through one of the programs of creating 
and audio processing as follows: 


First: Load one of the programs of creating and audio 
processing. 


Second: Audio recording through the program. 

‘Third: Read the text data already prepared and inserted to the 
computer using a microphone as an input unit. 

Fourth: Turn on the sound after the completion of recording 
and listen to it through headphones. 


processing: 


First: Load one of the programs of creating and audio 


- Usirig the "Audacity" program to create and audio processing 


which is an open-source software. GED \udacity 
Gs 
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- Audacity program that can be run on different operating 
systems like (Windows -Linux) 


- You can download the program through the website: 


Audacity Interface | 


audio). 


‘Second: Audio recording through the program. 


- To start voice recording through the program: 

(1) Click the "Record" button. ( 9) 9992 » 
- The program becomes in the audio recording mode. 

(2) Read the data collected for the school in the text file using the. 


Mic "microphone" as a unit input. 
- The Program Timeline to make sound appear. 


| 


Timeline 


(3) To complete entering audio data, click "Stop" button. (* ) 
ES. 
DDDDDD! 


(4) To listen through the speakers to the sound that has been 
entering click "Play" button. (>) 


The implementation stage to create a sound file includes: 
- Load a setup and sound processing software. 

- Click "Record" button to record voice. (®) 

= Insert text data by using the microphone. 

- To finish recording, click "stop". (= 

- To listen to the audio through the speakers, click "play". 


[e Third stage modifying the sound (or audio ci 


* There may be a need to after listening to the audio that was 
recorded to: 
(1) Add an effect on the sound (or audio) clip. 
2) Cut part of the sound (audio clip) and paste it somewhere 
else in the audio clips. 
(3) Delete part of the sound (audio clip). 


27 


CamScanner ب‎ Lis الممسوحة‎ 


dding an effect on 


- To add an effect on voice or sound clip as foll ws: 

(1) Audio playback by clicking "Play button" and listen to it. 

(2) Select the desired audio clip to which you want to add the 
effect, by pressing and dragging on the audio clip using the 
Reading pointer at the Timeline. 


The selected audio clip Er 
(3) From "Effect" menu, select one of the paral 
desired effects. 


(4) Rerun the audio by clicking play button and 
listen to the audio clip after adding the effect. 


To add "Repeat" effect, to voice or sound clip 


(1) Play the sound file and listen to it. 
(2) Select the desired audio clip to which you want to add the 

effect, by pressing and dragging on the audio clip using the 
Reading pointer at the Timeline. 


(3) From "Effect" menu, select one of the desired effects. 


(4) Rerun the audio by clicking play button and listen to the audio 
clip after adding the effect. 


ar 


7 When we choose "Repeat" effect, the selected clip is repeated. 


To add "Reverse" effect, to volce or sound clip 


(1) Play the sound file and listen to it. 

(2) Select the desired audio clip to which you want to add the 
effect, by pressing and dragging on the audio clip using the 
Reading pointer at the Timeline. 

(3) From "Reverse" menu, select one of the desired effects. 

(4) Rerun the audio by clicking play button and listen to the 

audio clip after adding the effect. 


|- When we choose "Reverse" effect, the beginning of audio is 
reversed with the of the end section. 


- Select the rest of the effects and add them 
to a sound clips. 


- play back the audio and listen to it and try 
to conclude the purpose of each effect. 
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- Cut the portion of the audio and paste it in another place 
among the audio clips on the timeline. [78.7773 


(1) Select the desired audio clip you want to cut)“ gy 
(2) From the "Edit" menu select "Cut". = 


- 


(3) Move the pointer on the Timeline to the desired place to 
paste the audio clip. 


(5) Rerun the audio by clicking the play button and listen to it. 


Delete a part of the sound audio clip as follows: 
(1) Select the audio section you want to delete, 
(2) Press "Delete" from Keyboard. 


Export an audio file with an appropriate extension 


- The dialog box "Export Audio" appear. 
(2) Select the appropriate extension of the audio file. 
(3) Save the audio file in "Pro1" folder. 


Bo 
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- There are different types of the extension of audio files such as 
(WAV, MP3, ...). 

- They differ in the quality and purity of sound and storage space. 

- According to need, we use the proper file extension. 


rent audio file extensions when saving as an audio file. | 

~ Save an audio file with WAV extension, and save the file again with | 
MP3 extension, | 

- Comparison of audio files with the extension WAV and MP3 in 
terms of: File size, sound clarity, purity and quality. 

~ Through the Internet search for the types of sound with different 
extensions files. 

~ Collect the information on the types of different extensions of audio 

files in a text program coordinators. 


Pe] Notice] 
IB Acro fie WAV) 


- The sound of a WAV file extension is characterized by: 
- The sound high quality and clarity. 

- It has a large storage capacity. 

~ It is not appropriate for publication via websites. 


D Audio file (MP3) 


~ Audio MP3 file, the sound is of less purity, compared with the 

file with WAV extension. 
- It has less storage capacity. 
~ It is appropriate for publication via websites. 


لتقا 


- There are many programs that are used on dealing with audio files. 
- They are software programs that enable the user to create and process 
audio files in an easy and proper way. 
© Creating an audio file: 
- To create an audio file, we need a sound processing software. 
- You can create an audio file containing audio clips and the words required 
as well as adding different effects on the audio, and then save the audio 
ina file. 
© Next steps for creating an audio file: 
First: the setup and processing to create an audio file. 
Second: the implementation stage. 
Third: modifying the sound (or audio clip). 
Fourth: Export an audio file with an appropriate extension, 
© Setup and preparing to create an audio file stage Include: 
- All the data that will be audio recorded. 
~ Make sure of the software components (install one of the programs of 
creating and audio processing on computers in the lab). 
- Audacity program that can be run on different operating systems like 
(Windows -Linux). - You can download the program through the website 
- Ensure the hardware components (connecting the microphone "Mic" to 
‘a computer). 
© The implementation stage to create a sound file includes: 
- Loud a setup and sound processing software. 
- Click "Record" button to record voice. (©) 
- Insert text data by using the microphone, 
- To finish recording, click "stop". ( 
- To listen to the audio through the speakers, click "play' 
© Add an effect on the audio clip: 
(1) Audio playback by clicking "Play button” and listen to it. 
(2) Select the desired audio clip to which you want to add the effect, by 
pressing and dragging on the audio clip using the Reading pointer at 


the Timeline. 
لتقا‎ 
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(3) From Effect” menu, select one of the desired effects. 
(4) Rerun the audio by clicking play button and listen to the audio clip 
after adding the effect. 
© Cut and paste an audio clip and paste it in another place: 
(1) Select the audio clip you want to cut, 
(2) From "Edit" menu select "Cut", 
(3) Move the pointer on the timeline to the desired place to paste the audio 
clip. 
(4) From the Edit menu select" Paste", 
® To delete an audio section: 
- Select the audio section you want to delete. 
- Press "Delete" from the keyboard. 
® To export an audio file with an appropriate extension: 
(1) From the "File" menu, select "Export Audio". 
(2) Select the appropriate extension of the audio file. 


- The sound ofa WAV file extension is characterized by: 
- The sound high quality and clari 

~ It has a large storage capacity. 

- It is not appropriate for publ via websites. 


© Audio "MP3" file: 
= Audio MP3 file, the sound is of less purity, compared with the file with 
WAV extension. 


It has less storage capacity. 
~ t is appropriate for publication vin websites. 


TE 


First: Re-Arrange the next stages for creating an audio file: 
) the implementation stage. 
) Export an audio file with an appropriate extension. 
) the setup and processing to create an audio file. 
) modifying the sound (or audio clip). 


E 


- Second: Put (7) for right answer and (x) for wrong answer: 
© There are many software programs help to process audio files in 
an easy and proper way. ( 

@ To create a text file, we need a sound processing software. ( 
© Audio MB3 file, is appropriate for publication via websites.( 
© We can not save the audio in a file. ( 
© The sound of a WAV file extension is characterized by a small 
storage capacity. ey 
© We can not add an effects on audio clips. € 2 
@ Press "Delete" from Keyboard to delete the audio section you 
selected. t ) 
© The sound of a WAV file extension is characterized by is 
appropriate for publication via websites. C) 
- Third: Choose the correct answers from between the brackets: 
© Using the "Audacity" program to create and audio processing 
which is an ... software. 
(a huge — Close source — open source - none of the previous) 
© Audacity program running on operating systems like 
(Word — Windows - Linux - Windows and Linux) 
© To export an audio file with an appropriate extension, from the 
"File" menu, select 
(Export — 
© The sound of a 


udio - Export Audio - Save) 
file extension is less storage capacity. 
(WAV - JPG - MP3 - TXT) 
© To listen through the speakers to the sound, click... 
(Stop button - Play button - Record button ~ Effect) 
© To start voice recording through the program, click the ... 
(Stop button - Play button ~ Record button - Effect) 
@ To add an effect on the audio clip, from......... menu select one of 
the desired effects. 
(Stop button - Play button — Record button - Effect) 


GA 


الممسوحة ضوئيا ب CamScanner‏ 


Creating and editing video 
(Preface) 


® Programs of creating and editing video files are the ones that 
enable the user to create and edit video files. 

** This is done through tools and effects that help the user create 
and edit video clips easily and fast. 


* Creating and Processin 


Video File Programs 


® For editing a video of a group of images taken, or edit video 
clips recorded by a video cam or a webcam, you must use a 
program through which the video is cut into segments of still 
clips. 


® Moving these shots in a fixed speed makes them feel 
animated. 


© There are many programs that can be used in creating and 
editing video files like: "Kdenlive" and "OpenShot". 

-They are open source and free to use. 

- They are easy to operate with Linux and Windows. 

© There is “Movie Maker" program to process video files, runs 
in Windows. 


© These programs and other ones can be downloaded online. 


Download video program and identify its interface || 


ÁA » 


- Download one of creating and editing video programs 
and identify its interface.) 


- Download a video editing program "OpenShot". 35 
- You can download the program through the website: 
http: .openshot.or 


* OpenShot Video Editor is used to create and edit videos. 
®» Videos can be created through images collected. 


OpenShot Video Editor is characterized by 


(1) OpenShot Video Editor enables the user to make a high 
quality video with images, backgrounds and inserting audio 
files easily. 

(2) The interface is easy to use to add images and sound easily, 
with video effects, transitions and even texts to the segnient. 


* The program will be used to make a video about 
school activities. Ji 
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Main Toolbar a Ts 


ii وروم‎ 


3) Function Tab (Move/ Images/ Audio files) ]لها‎ 
4) Preview Window. 

5) Edit Toolbar. | 
6) Zoom Slider. a EEE 


7) Play head/Ruler . 


) Timeline. 


Cs] 


- What similarities and differences between the OpenShot 
Interface and other programs they used before. 


- Use Help to find new information about the program 


(1) Ruler (to show the time length on the timeline). 
2) Play Head (reads the current clip on the timeline to show in 
Preview Window). 
(3) Current clip (image, sound or video). 
(4) Tracks: They are similar to layers where images, sounds or 
video caption clip is put on the track. 
Unlimited number of tracks can be used in the project. 


That the higher track has the priority to read to 
show the video, then the lower and so on. 
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\(2)[Put Images in order on the Timeline! 


- To create Video clips, the images are put in order on the video 
timeline. 


coed US ee 

- Create video clips about your school, including 
pictures of the school building, labs, playgrounds, 
activities, competitions and the most important prizes. 


stepsitolcteatelaNideoiaboutthslechoolleasily Drag and drop the images from the “Project Files” window 


(1) Import image files to the program. to timeline. : ] 
(2) Put the images in order on the program Timeline. 2] Put each image in a track and put them in the suitable order. 


(3) Import a sound file to the program. 
(4) Preview the video. 


Import image files into the program: 


- Import images from the (my school “yû 4") folder, to show in 


the "Project Files" tab in the program interface. 


- Click Import files icon? in. | د + > - ه هع‎ IE 
the Main Toolbar. r = 


- From File menu, select Import Files. 


When putting images in Track, they become a (Video Clip) and 
appear in the Video Preview. 
13] Put the images in order in Tracks on the Timeline. 


لها | 
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Import Sound files into the program:‏ ل( 


- To mal i i 
Drie vices oie cme attractive and effective, we add 
* To add sound file: 
[1] Click Add File icon È on the Main Toolbar 
and add sound file to appear in “Project Files" tab. 


bra 


12] Drag and drop the sound sign to insert in one track. 


Preview the Videc 


* To preview the video: 
- Click the Play icon in the Preview window. 


Play icon î 


- To add a new Track: 
Click the # Add Track icon on the Edit Toolbar. 


uf Add Track icon 


- To change the order of the video clips (images! sound) on the 
track, drag and drop and reorder them. 
- To set playing the sound file, drag and dro 


track on the Timeline and put in its place. 


yp the sound on the 
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Q 

[7] E 

4 : 

5. 3 " 

- Second: Re-Arrange the following steps to create a video 
sch 

(Put the images in order on the program Timeline. 

(£) Import image files to the program. 

0 Preview the video. 

(Import a sound file to the program. 


a 
= ET 
PLUS SUOLES NZ 


لعا 


© Programs of creating and editing text files, enable the user to 
create and process video files in an easy and proper way. ( ) 


@ You can add a new track, by clicking on the Add Track icon on 


the Edit toolbar, C) 
"OpenShot" is closed source program. ©) 
To edit a video, you must use a program through which the video 
is cut into segments of still clips. CD 

© There are many programs that can be used in creating and editing 
video files like: "Kdenlive" and "Microsoft Word". 6 J 


© Moving shots in a fixed speed makes you feel animated. ( — ) 
"Kdenlive" and "OpenShot" are operating with Mac system( — ) 


Choose the correct answers from between the bracke 


You can download the .. program through the website: 
http://www .openshot.org 
("Kdenlive” - “OpenShot" - "Movie Maker" - "Website") 


© “Openshot” is program. 
(Open source - closed source - large capacity - Storage space) 

© There are many programs that can be used in creating and editing. 
video files like: 

("Kdenlive" - "OpenShot" - "Movie Maker" - "All of the previous") 

program is used to process video files, runs in Windows. 

("Data Base" - "Excel" - "Movie Maker" - "None of the previous") 
© The "OpenShot" ..... is easy to use to add images and sound easily 
(Open source - closed source - interface - Windows) 

© “OpenShot” is operating with system, 

(Windows only - Linux and Windows - Linux only - Mac only). 


@ Unlimited number of ............. can be used in the project. 
(tracks - Windows - Mac - Linux) 
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Important Notes to save the project 


- During work in OpenShot in "Ms Windows", and saving the 
project. 
-0 
- The “sch” file is unknown so it appears. 
- To make the file work in the OpenShot program, | -ms 
do "Association" as follows: en 
(1) Right click on the “sch” file. 
(2) Select Properties from the shortcut 
menu. 
(3) Then select change. 
(4) Then select More Options. 
(5) Select Look for another app on this PC. 


(© The system will find the OpenShot application folder. 
(7) Select Association" to the executable file of the program. 


Edit video clips 


- After Previewing the Video, the clip may need some editing 
like: 
(1) Reorder the scenes. 
(2) Delete a scene. 
(3) Increase or decrease the time period for a clip. 
(4) Adjust the time to match the sound file length. 


[ 1] Control the play time of the Video Clip. 


* After previewing the video clip, the sound file time may be 
longer than the image show time. 

* This appears in the Timeline which ends the images and the 
sound continues. 


* This can be seen also in the clips on the timeline. 


e 
The Sound file length on the timeline. 


(1) The image clip time length on the timeline. 
(2) The Sound file length on the timeline. 


57 
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© To cdit a video, you must use a program through which the video 
is cut into segments of.. 


© There are many programs that can be used in creating and editing 
video files like ." and". 


© Moving. . ina fixed speed makes you feel animated. 
© "Kdenlive" and "OpenShot” are operating with 


.. system. 


© Programs of creating and editing ssa enable the user to 
create and process video files in an easy and proper way. 


@ You can add a new track, by clicking on the... 
the Edit toolbar. 


© "OpenShot" is 


icon on 


source program. 


im column (A) for column 


reads the current clip on the timeline to 
show in Preview Window. 


They are similar to layers where images, 
2 | OpenShot | B | sounds or video caption clip is put on the 
track. 


3 | PyHead | C | image, sound or video. 
4 | Tracks |D | Select New Project. 

E | to show the time length on the timeline. 
5 | Current clip || Video Editor is used to create and edit 


videos, 


- To create video clips, we use images, sound files and text files; 
these all must be saved in one folder. 


- All the previous files were saved in the folder "Pro1" to be able 
to go and edit, delete or add later. 


Steps to save the video project 


(1) Save all the files (images, sound, text, etc.) in one folder. 


(2) On the Main Toolbar, 


select "File", 
then "Save Project As" 
(B) Define where to save in the folder 


"Prol" 


(4) Name the Project "sch" 
- All names must be in English. 
* To end the program: 
- From the "File" menu, select "Quit". 


** To contine the project: 

~ Start the program, then open the "Prol" folder, 
then open "sch" project. 

- Edit the video clip. 
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= You can control the sound clip to end at the same time with the 


last image clip on the timeline 


Timeline 


[2] Control the time length for images and J 


sound on the timeline 
WS ات لخ‎ 


(1) Move the play indicator, drag and drop the arrow (or use the 
arrows on the keyboard) until it reaches the end of the last 
image on the timeline. 

(2) Put the mouse cursor on the Track, right click the mouse. 


(3) From the Shortcut menu, select Slice Clip. 
- And then choose Keep left slide. 


ae eee 000 0. d‏ جح بج سجس ا جر 

- When moving the play indicator on the timeline, then select one 

track and select "Slice Clip", the video clip splits at the 

indicator place and becomes two slides (right slide and left 

slide). 
- When selecting Slice Clip, the following appears: 

(1) Keep both slides. 

(2) Keep left slide. 

(3) Keep right slide. 

* What the difference between the three choices? 
(1) When you selecting (Keep both slides): 

~ The clip splits into two slides and keep them both. 


Keep Both slides 


(2) When you selecting (Keep Left slide): 
~ The clip splits into two slides and keep the left slide only. 


Left slide 


(3) When you selecting (Keep Right slide): 
~ The clip splits into two slides and keep the Right slide only. 


Right slide 


لقا 
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- The Program Interface consists of the following: 


ججح 


) Current clip (image, sound or video). 
) Play Head (reads the current clip on the timeline to show in 
Preview Window). 
€) Tracks: They are similar to layers where images, sounds or 
video caption clip is put on the track. 
€) Ruler (to show the time length on the timeline). 


Put (¥) for right a 


d (*) for wrong 
‘Kdenlive” and "OpenShot" programs and other ones can not be 
downloaded online. C ) 


"Main Toolbar" from components of "OpenShot” interface.) — ) ofthe ges toa of f OpenShot pas 


There is only one program that can be used in creating and editing (Timeline - Project Files - Edit Toolbar - All of the previous) 
video files is "OpenShot”. © 2 
OpenShot Video Editor enables the user to make a high quality 
video with images, backgrounds and inserting audio files easily. 


© From File menu, select ......... to save a new project. 
(Save - Save Project As - Export - Save Project) 


C © Click Import files icon ... in the Main Toolbar. 
B The OpenShot interface is difficult to use to add images and sound طم‎ _ © v.m 
easily, with video effects and transitions. k 2 © Put the images in order in Tracks on the .. TY 
© From"File Menu", select "Save" to save Project. € 9 (Folder - Timeline - Files - Tracks) 
@ To preview the video, click the "Play" icon in the "Preview © When you selecting the clip splits into two slides and keep 
Window". € 3 them both. (Keep both slides - Keep left slide - Keep right slide) 


لها 60 
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otice: 


(1) The text can be added at the beginning, in the middle or at 
the end of the video clip. 


(2) Add a Track or more to add the text and other clips (images 
or sound). 


(3) Reorder the video clip (audio, images or text) on the Track. 


Reorder the video clips 


Exercise SS 


- Add another text file to the video as follows: 

- Follow the steps mentioned above to create another text file 
with information about your school, like the Governorate, the 
Directorate ... ete. 

- Save the text file in the project folder "Prol". 

- Add text to the video clip as done before. 

- Reorder the video Clips. 


- The project can be exported to a video file with a suitable 
extension. 

- The "Openshot" program makes it easy to export in different 
extensions, (such as AVI - MP4 ....), they differ in terms of 
storage space and clarity and quality. 

- Steps to export the video to a fil 

(1) Press Export Video button @, in the Main toolbar. 

OR; 


- Open File menu, and se ect Export Video. 
- A dialogue box of Exp« rt Video appears: 


(A) File Name: select name for the file. 
(B) Folder Path: select the path to save 
(C) Target: select the extension to the video file. 
(D) Quality: Decide the file quality level (High quality — 
Medium quality — Low quality). 
(2) Press "Export Video button". 


= 
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o file and pre 


Play the vid 


* To preview the video: 
- Click the Play icon in the Preview window. 


Play the 


Files with differ 


- There are different types of Video files with different. 
extensions. 

- They are different in size, quality and clarity. 

- The extension of the video is decided according to the usage. 


— EXeTrCIse 


** Search the internet for: 
- Different video types and usage. 
- The difference between different extensions, MP4, AVL ..., | 
according to size, quality and clarity. 
[s Notice} 
~The video of a MP4 file extension, has a large storage capacity. 
~ It is appropriate for publication via websites. 
-The video of a AVI file extension, has a large storage capacity. 


لعا 


-There are many programs that can be used in creating and editing video 
files like: "Kdenlive" and "OpenShot". 
"They arc open source and free to use. 
-They are easy to operate with Linux and Windows. 
- Movie Maker program is used to process video files, runs in Windows. 
E Kécsliveend ‘OpenShot programs and other ones can be downloaded 
online. 
= You can download the OpenShot program through the website: 
http: jwww.openshot 
To create a video clip: 


(1) Import files (images - sound) into the program. 
(2) Put images in order on the program Timeline. 
(3) Import a sound file to the program. 
(4) Preview the video. 

To save a video project: 
(I) Create a Project Folder and name it in English, on one of the drives, 
(2) Put all the files, sound, images, ete., in the project folder. 
() Save the Project file and name it in English from the Main Toolbar, open 

File menu and select Save Project As. 

(4) Save the project file in the Project Folder. 

Edit the Video Clips by 
(1) Control the length of the video clip time. 
(2) Add Effects to the video clip. 
(3) Add Transitions to the clip. 
(4) Add text to the clip. 

To control the time length of the video clip: 
(1) Define the time length of the clip on the timeline. 
(2) Drag and drop the head of the play indicator and move it until it goes to 

the right place on the timeline. 

* Right click the clip Track, a drop box appears: 

~ Select Slice Clipto split the clip into two slides. 

(a) Keep Both Slides the right and left slides are kept. 

(b) Keep the left slide. 

(©) Keep the right slide. 


(3j 
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- First: Put (¥) for right answer and (x) for wrong answer: 


@ Ruler used to show the time length on the timeline). 


e 17 


we can not put the images in order in Tracks on the timeline( — ) 
© You can not import image files or sound files into the Openshot 


program. 
© The Current clip may be image, sound or video. 


23 € 
3 »ع 


Click on the icon oP in the Main toolbar, to Export Video.( ) 
Q To Add effects to the video clip, click on the Play icon in Preview 


Window, € D) 
@ Images and Sound files of the components of the OpenShot 
interface. ( ) 
© Unlimited tracks can be used in the project. € 3} 
~ Second: Choose the correct answer: 
@ To play the video file, press the Play icon in the .......... 
[a] Preview window. [b] Main Toolbar. 
[c] Project Files. [d] Function Tabs. 
_ Le eoe from types of video files. 
[a] bmp, jpg. [b] png, txt. 
[c] AVI, MP4 [d] doc. 
© To add text to a video clip, from ........... menu, select Title. 
[a] File. [b] Title. 
[c] Edit. [d] View. 
© OpenShot Video Editor is characterized by: 
[a] open source. [b] free to use. 


[c] The interface is easy to use. [d] All of the above. 


Gs) 
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© You can add text to video and can be placed the text .......... [Sen Uuestio ns D 
[a] At the beginning of the video. [b] At the end of the video. 


{[c]In the middle of the video clips. [d] AII of the above. 


Question 1: Complete the following: 
- The Program Interface consists of the following: 


© To save a project, open File menu, and select ... 


[a] Save As. 1b] Save. | 
[c] Save Project As. [d] None of the above. 

@ To Export the video, click Export Video icon ©: 
[a] Main Toolbar. [b] Project Files. 
[c] Function Tab. [d] Edit Toolbar. 


- Third: Matching from column (A) for column (B): 


Column (A) Column (B) 
T | From File menu | A | used in creating and editing video files 
[ 2 | Function Tab | B | select Save Project As command 
3 | Click Play icon | C | Click the icon on the Edit Toolbar 
4 | OpenShot D | To preview the video 
5 | Add a new track | E | It includes (Move/ Images/ Audio files) 


- Fourth: Complete the following sentences: 


@ To delete the Effect, right click the effect sign and select ........ à... 
2) ... 
To add effects to a video clip, click the . tab. 9 T 
Om is put at the beginning or the end of the video clip. " P 
© To add Text to a Video clip, from the ........... menu select Title. 6 
© when you selecting ............ the clip splits into two slides and (9.. 
keep them both. 
5 ® 
The .......... can be added at the beginning, in the middle or at the 
tae © 
end of the video clip. 


@ We can control the time length for images and sound on the 


Cx) 


| EB] 
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Question 2: Complete: 
- To create video clips, follow the following steps: 
0) 
Qo. 
yas 
(4). 

Question 3: Put the following steps in the correct order: 

- To save a project, you should do the following: 

) ) Save the project file in the project Folder. 

(_) Save the project file and name it in English from the Main 
Toolbar, File, Save Project As. 

€) Create a project folder on one of the drives and name it in 
English, 

C) Put all the files (images, audio, etc.) in the project folder. 


Question 4: Complete: 
- The program timeline consists of: 


- First: Complete the following sentences from between brackets: 
(Interactive webpage - Main Toolbar - HTML - Website - Openshot 
- Delete - Home page - Open source) 


 ....... contains icons for importing files, and export video .. etc. 
© To delete a selected audio section, press ......... on the keyboard. 
© ....... is a software that enables the user to create and edit video. 


© Openshot program is free to use and .. 

e .. has a certain name and Web address. 

© Static web page is designed by .. s.. code. 

e is designed by HTML, JavaScript, PHP and others. 

e. the first page in the website through which other pages 
can be visited. 

~ Second: Put (^) for right answer and (x) for wrong answer: 

© The web page includes texts, images, audio files, videos and 


hyperlinks € 5 
© http://www.openshot org is a correct website address to download 
the Openshot program. ( ) 
© The second stage to design and create a website is implement the 
web pages. C 2 
© To save an audio file using Audacity program, from the Edit menu 
select Save As. 6 i 


© The planning stage is the last stage to design and create a Website. 
( ) 


OD Click Record button to record voice. t a 
@ To add Effect to a video Clip, click the Project Files tab. ) ) 
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- Fourth: Complete the following sentences: 
@ You can download the program through the . 
© To complete entering audio data, click ... 
when we choose .. effect, the selected clip is repeated. 
© When we choose . . effect, the beginning of audio is 
reversed with the of the end section. 
OT.. .. an audio section, select the audio section you want to 
remove. 
© Audacity program is 
- Fifth: Re-Arrange the following steps to cut the portion of the 
audio and paste it in another place among the audio clips. 
(C) From "Edit" menu select "Cut". 
) Move the pointer en the Timeline to the desired place to 
paste the audio clip. 9 
¢) From the "Edit" menu select "Paste". 
) ) Select the audio clip you want to cut. 


- Sixth: Complete the following from between the brackets: 
(WAY - Delete - Effect - File - MP3 - Audacity) 


© Using the" .." program to create and audio processing 
which is an open-source software. 


source software, 


© To delete an audio section, select it, then press ... .. from the 
keyboard, 

© The sound of a file extension is characterized by high 
quality and clarity. 


© To export an audio clip, select Export audio from . 
© Audio... file is not appropriate for publication via websites. 
@ To add an effect on the audio clip, open ..... .. menu, 


GJ 


* The first question: Complete the following: 


- To create an audio file, do the following: 
Firstly: 


Secondly: 


Thirdly: . 


* Second question: Perform the following steps to create and 
export the audio file: 
~ Choose a topic of study from school subjects 
~- Collect information on the academic subject. 
~ Load one of the programs of creating and edit an audio file, 
- Create a sound file, 
- Export the file with the appropriate extension. 


لقا 
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- First: Type the term that indicates each of the following: 

© itis program that enable the user to create and process audio files 
in an easy and proper way. 

© Tt has a large storage capacity. 

© it is a site on the internet that consists of a webpage or more, it is 
visited through a certain web address. 

© To cut an audio clip from Edit menu. 

© The sound file extension is appropriate for publication via Internet. 

- Second: Put (^) for right answer and (x) for wrong answer: 

O To create an audio file, we need a sound processing software. — ) 

@ Interactive webpage such as the Contact us page on the Ministry 
of Education Website. C) 

© The third stage of designing and creating websites is setup a 
simple diagram on paper for the homepage and the site pages.) 

© The sound of a WAV file extension is appropriate for publication 


via websites. C) 
© Webpage is the opening page in the website through which other 
pages can be visited. C 


- Third: Matching from column (A) for column (B): 


A | To delete an audio section. 
B | It is designed by HTML code. 


E | to paste the audio clip on Timeline. 


~ Fourth: Choose the correct answer from between the brackets: 
©............. of the components of the web page. 
(sound - video - Hyperlinks - All of the previous) 
© ..... Webpageis designed by HTML, JavaScript, PHP and others. 
(Static - Homepage - Interactive - Website) 
button to record voice. 
(Record - stop - Play - Save) 
© To export an audio file with an appropriate extension, open the 
menu. 
(Record - File - Edit - Effetts) 
© To add an effect on the : udio clip, click T 
(Record - File - Edit - Effects) 


ovum resonet 


- First: Put (>) for right answer and (x) for wrong answer: 
© There is no programs that are used on dealing with audio files.( ) 
To rerun the audio by clicking Record button and listen to the 


© cii... 


audio clip after adding the effect. C i 
© Texts and images of webpage components. ( ) 
© Example of a static web page, the E-learning page on the Ministry 

of Education website, € 3 
© To delete an audio section, select the audio section you want to 

delete and select Cut from Edit menu. ( ) 


- Second: Type the term that indicates each of the following: 
© The sound file extension is appropriate for publication via. 
Websites. 


لها 


— 
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© itis a document with electronic content on the internet which can 
be shown through a web browser. 

© Using to create sind audio processing which is an open-source 
software, 


@ itis a webpage that has a content allowing the visitors to interact 
with and manipulate. 


© Fourth stage of designing and creating websites. 
- Third: Choose the correct answer from between the brackets: 
© To cut an audio clip, from the . menu select Cut. 
(Cut - Paste - WAV - Edit) 
© From the File menu, select to export an audio file. 
(Cut - Paste - File - Export Audio) 
„» file, the sound has less storage capacity. 
(Cut - MP3 - WAV - Export Audio) 
© Audacity program that can be run on different operating 
systems like A 


© Audio. 


lows - Linux - All of the previous) 
.. file extension is the sound high quality 


(Cut - MP3 - WAV - Export Audio) 
- Fourth: Complete the following with suitable words: 
© To listen to the audio through the speakers, click 
can be visited on the computer or the cell phone. 


file, the sound is of less purity, compared with the 
file with WAV extension, 


is the last stage to create a website. 
« content doesn’t change and can’t be edited by the 


; IFbme work Sisi 


file includes: 
o ‘setup and sound processing software. 
cia... . button to record voice. (@) 
© Insert text data by using the .. 5 
© To finish recording, click .. ®© 
© To listen to the audio through the speakers, click .. 


© 


= Second: Put (v) answer and (x) ai 
© Transport menu to record sound of Audacity Interface 
components. £ d 


© To select an audio clip to which you want to add the effect, 
pressing and dragging on the audio clip using thc Rcading pointer 


at the Timeline. € ) 
© The website can be visited on the computer only. e» 
Static webpage like the contact us page on the Ministry of 
Education Website. t» 
© The components of the webpage [text - images - sound - video - 
hyperlinks]. C 83 
@ To cut an audio clip selected, open the File menu, and select Cut. 
€ D 
@ The sound of a WAY file extension is characterized by: the 
sound high quality and clarity. & 
© Audio "MP3" file is not appropriate for publication via websites. 3 
( 
Audio MP3 file, has less storage capacity. 6 2 
لقا‎ 


CamScanner ب‎ Lis الممسوحة‎ 


1 
) (556 setup and processing to create an audio file. 
(O) Export an audio file with an appropriate extension. 

(£) The implementation stage. 

(_) Modifying the sound (or audio elip). 

= Fourth: Complete the following to add an effect on the audio clip 

® Audio playback by clicking ". x „and listen to it. 

@ Select the desired audio clip to which you want to add the effect, by 
pressing and dragging on the audio clip using the Reading pointer at 
the 5 

© From ". "menu, select one of the desired effects, 

© Rerun the audio by clicking play buttonand listen to the 
after adding the effect. 


th: Choose the nsw: 
© The first stage of designing and creating a Website: 
(A)Planning to create a website. (B) Design the web pages 
(C)Publish the website on the internet. 
© The Last stage of designing and creating a Website: 
(A) Implement the web pages. (B) Prepare.and develop the web pages 
(C)Publish the website on the internet. 
© The Second stage of designing and creating a Website: 


(A) Design the web pages. (B) Implement the web pages. 
C) Prepare and develop the web pages. 
a 


| 
| 


- Creating and editing a video file using a video: 


[Speci objectives NE 


editing program, | 


By the end of this lesson, the students will be able to: 


(1) Identify some video editing program. 


(2) Import video editing program files (sound/images). د‎ 


(3) Create video captions using the program. 
(4) Edit video segments. 

(5) Save video file project. 

(6) Add (effects, transition effects, text) to video 
(T) Export video to a file with suitable extension. 


segments. 


Ce 
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Add effects to a video clip j 
— 


- Add "Effects" to the video clip and control the time of this 
effect to show the clip in a certain way. 


# Steps add effects to a video clip: 
(1) Click "Effects" tab. 


Effects tab 


Some effects appear. 


Effects symbols 
(2) Choose an effect.) 


لعا 


(3) Drag and drop the effect to add it to the clip. 


| 6) Preview the video. 


| 


- The Effect sign appears. 


Effect sign 


£ To read the effect name, put 
the cursor on the Effect sign. 


- To delete the Effect, right 
click the effect sign and 
select "Remove Effect", 


Remove effect 


| 
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ae 


(1) Click the "Transitions" tab. 


V Transitions symbols 


(2) Drag and drop one of the transitions to add to the video clip. 
(3) Control the transition length by drag and drop it to increase 
or decrease the show time. 


(4) Preview the video. 


- The transition is put at the beginning or the end of the video 
clip. 
Exercise 


- Dear students usc Files", "Effects" and "Transition" and know 
the difference : 
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Ex GUCSTIONS O 


First: Re-Arrange the steps to add effects to a video clip: 

) Preview the video. 

) Choose an effect. 

) Click "Effects" tab. 

) Some effects appear. 

) Drag and drop the effect to add it to the clip. 
- Second: Complete the following steps to save the video project: 
@ Save all the files (images, sound, text, etc.) in one 
© On the Main Toolbar, select . 
© Define where to, 
© Write name of the . 
© All names must be in 


- Third: Put (¥) for right answer and (x) for wrong answer: 

@ Four tracks only can be used in the project. € 7 
© Function Tab of the components of the OpenShot interface.) — ) 
© The transition is put at the beginning or the end of the video clip. 


© When putting images in Track, they become a "Video Clip" and 


appear in the "Video Preview". t b 
© To import image files into the OpenShot program, from File menu 
select Add Track. E 7 


© To delete the Effect, put the cursor on the Effect sign. — ( ) 
@ The higher track has the priority to read to show the video, then 
the lower and so on. ( ) 
© We can not control the time length for images and sound on 
the timeline. ( ) 


لكا 


-~ Fourth: Choose the correct answers from between the brackets: 

© To import image files into the OpenShot program, from File menu 

select ......... (Add Track - Import File — Add — Import) 

© To delete the Effect, right click the effect sign and select 
(Remove Effect - Delete — Clear - Undo) 

© To add a new Track, click the icon on the Edit Toolbar. 


vB‏ © طم 
To create video clips, we use images, sound files and text files;‏ © 
these all must be saved in folder.‏ 
(Two - One - Three - Unlimited number of)‏ 
To add an effect to a video clip, click tab.‏ © 
File - Edit - Transitions - Effects)‏ ( 
more attractive and effective, we add music‏ . 


© To make the 
or sound comment, 
(File - video clip - Folder - File and Folder) 
@ Click Add File icon % on the Main Toolbar, and add sound file to 
in. tab. 
(Project Files — Effects — Timeline - Edit Files) 
© To add a transition to a video clip press the ... ... tab. 
(File - Edit - Transitions - Effects) 
© When selecting Slice Clip, the following appears: (Keep both 
slides - Keep left slide - Keep right slide — All of the previous) 


~ Fifth: Re-Arrange the steps to add transitions to a video clip 
) Drag and drop one of the transitions to add to the video clip. 
) ) Control the transition length by drag and drop it to increase 
or decrease the show time. 
(>) Click the "Transitions" tab. 
C) Some transitions appear. 


Ce) 
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Oz ... an effect. 

© Some effects appear. 

© and drop the effect to add it to the clip. 

© Preview the 

z Second: Re-Arrange the next steps to save the video project: 


) Write name of the file. 
) All names must be in one folder. 

) Save all the files (images, sound, text, etc.) in one folder. 
) On the Main menu, select File, then "Save Project As”. 

) Define where to save in the folder. 


= Third: Put (^) for right answer and (x) for wrong answer: 
© To make the Transitions more attractive and effective, we add 


masic or sound comment. 6-3 
© Click Add File icon "I? on the Main Toolbar, and add sound file to 
appear in Effects tab. C 


© From File menu select Import files, to import image files into the 
OpenShot program. € 2 
© To delete the Effect, right click the effect sign and select No.( — ) 
© To add a transition to a video clip press the Project Files tab( — ) 
© To add a new Track, click قلعن‎ 
@ To create video clips, we use images, sound files and text files; 
these all must be saved in Three folders. € 3 
© To add an effect to a video clip, click Transitions tab. ( 


وه 


n on the Function Tab) 


ee =A GIG مسا‎ Dw 


- Add text to a video clip. 


(1) Select the text to add to the video. 
(2) Select the places to add the text to (at the beginning, in the 


middle or at the end of the video) d 


(3) From the Title menu, select Title, 
- The following dialog box appears: 


la] "Select a template". 
el "Text Color". 
- Save text in a file. 
(4) Press Save button to save the text in the project folder "Prol". 
Name the text file in English. 


- The text file appears in the "Project Files" tab. 


[b] "Change Font". 
[d] "Background Color". 


(5) To add text to video clips, drag and drop the text file in the 
Project Files and add it to a track. 
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The sound of a WAV file 
vm A | Runs in Windows 
2 | Add track icon B | Planning 
3 | Transport menu C [has a large storage capacity. 
The first stage of design 
4 | and create a Website. B. [jo esoct cin 
5 | Movie Maker E [in Edit Toolbar 


- First: Put () for right answer and (x) for wrong answer 
@ Using the Audacity program to create and audio processing 
which is an Close source software. C2) 
© To listen through the speakers to the sound, click Play button. ) 
© To delete the "Effect", right click the effect sign and select "Save. 
Project As". e» 
@ To play the video file, press the Play icon in the Preview vides 
WAV file extension from types of video files. € 
- Second: Complete the following sentences: 
@ To start voice recording through the program, click the .. 3 
@ To export an audio file with an appropriate extension, from the 
"File" menu, select. 
When we choose. . effect, the beginning of audio is 
reversed with the of the end section. 
o Video Editor is open source program and free to use. 
© You can add . (o video and can be placed the text at the 
beginning of the video, at the end of the video or in the middle of 
the video clips. 


-~ Third: Choose the correct answers from between the brackets: 
OTe is the opening page in the website through which 
other pages can be visited. 
(website - Home page - web page - Static) 
‘© Components of the web page, 
(text - images - sound - All of the previous) 
e is a document with electronic content on the internet. 


which can be shown through a web browser. 
(Interactive - Static - web page - Home page) 


Othe web page content is prepared by the page developer. 
(Interactive - Static - Home page - web page) 
e is a webpage or more, connected with each other, with 


a certain name and Web address. 
(website - Home page - web page - Interactive) 
Fourth: Re-arrange the following steps for designing and 
creating a website: 
) Planning to create a website. 
) The third stage: prepare and develop the web pages. 
) The second stage: design the web pages. 
) The fifth stage: publish the website on the internet. 
) The fourth stages: implement the web pages. 


- First: Complete the following sentences: 
© To add an effect on the audio clip, from ... 
the desired effects. 
© To save a project, open File menu, and select .. 
© The Edit Toolbar and Function Tab from the components of the 
interface. 
لها‎ 
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.... menu select one of 


© Click on the icon WP in the Main toolbar, to 
© When we choose ... .. effect, the selected clip is repeated. 
- Second: Put (^) for right answer and (x) for wrong answer: 
© Audacity program running on operating systems like Windows 
and Linux. ( 9 
© The sound of a WAV file extension is less storage capacity.) — ) 
© To Export the video, click Export Video icon @ in Main 
Toolbar. ©) 


© Website is a document with electronic content on the internet 
which can be shown through a web browser. € ) 


© To add text to a video clip, from File menu, select Title ( ) 
- Third: Type the term that indicates each of the following: 
O It is the opening page in the website through which other pages 
can be visited. 
© it is content allowing the visitors to interact with and manipulate. 
© it can be visited on the computer or the cell phone. 
@ The content doesn’t change and can’t be edited by the visitor 
© it is a document with electronic content on the internet which 
can be shown through a web browser. 
- Fourth: Select the word different: 
© Planning - Implement — Publish — Interactive webpage. 
© Static webpage — Select a web address 
- Publish on the Internet — Decide the storage capacity on a server 


© Homepage — Webpage - HTML — Website. 
@ Kdenlive - Audacity - Movie Maker - OpenShot 
© Cut - Paste - Keyboard - Edit 


Fine work Zr 


followis betw, 
(File - Static - audio file - transition - last - first - Import Files - 
Audacity) 


enable the user to create and process audio files in an 
easy and proper way 

© Set up a simple diagram on paper for the homepage and the site 
pages is the stage of design and create a Website. 

© From .. menu, select Save Project As to save the project. 

Audacity program used on dealing with 

to import images and sound files. 


© From File menu, select 


© Decide the storage capacity on a server is the stage of 
design and create a Website. 
@ Clicking and drag to control the time of display .. 


e . Web pages is designed by HTML code only. 


the followi video 
© From Title menu, select ... 
@ Fin inthe... . box. 
© Press .. to save text in a file. 
© Name the text file in . 
© The text file is found in T 
© Add text file to the video clips by drag and drop the text file and 
add ittoa 


لقا 
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third: Choose the correct answer from the following: = Fifth: Complete the following: 


O The. can be visited on the computer or the cell phone. - The Program Interface consists of the following: 
(Webpage - Website - Interactive) 9 
© The . ... Webpage that has a content allowing the visitors to 


interact with and manipulate, 
(Web Page - Web site - Interactive) 
à document with electronic content on the internet 
which can be shown through a web browser. 
(Webpage - Website - Interactive) 
© From Webpage components ... and 
(Images and texts - Audio and video clips - All of the above) 
e. program is used to dealing with audio files. 
(Audacity - Effect - Interactive) 
To select an audio clip, press and drag on the audio clip using the 
Reading pointer at the . 
(Audio - Timeline - Effect) 
@ To add an effect to an audio clip, select . menu. 
(Audio - Effect - Interactive) 
© To cut an audio clip, select Cut from .. 
(Edit - Effect - File) 


Q) 
[7] 


. menu. 


| am timeline consists of: 


= Fourth: 


ut (>) for right answer and (x) for wrong answer: 
© Audacity software that used to create and process sound is closed | 
source. € D 
© OpenShot program is open source and free to sue. ©) 
© We can change the contents of a web page through the internet. 2 
explorer. ( 5 eam 
© We can download OpenShot program through the website: C = following steps to create a video about 
ht shot. C3 ) ) Put the images in order on the program Timeline. 
© The sound of a WAV file extension is appropriate for publication C) Import image files to the program. 
via websites. 6 3 : ) Preview the video. 


To export an audio file, select Export Audio from File menu( — ) ) Import a sound file to the program. 


Gu | = | 
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Test of the half first semester Ei] 


- First: Type the term that indicates each of the following: 

© The last stage of design and create a Web Site. 

© it is a site on the internet that consists of a webpage or more, it is 
visited through a certain web address. 

© it is designed by HTML code. 

© itis a webpage that has a content allowing the visitors to interact 
with and manipulate. 

© The button is used to listen to the audio through the speakers. 

- Second: Put (¥) for right answer and (<) for wrong answer: 

© Tocut an audio clip, from the Edit menu selectCut. — ( 

© Home Page is a webpage or more, connected with each other, 
with a certain name and Web address. ( 

© Components of the web page, [text - images - sound - video - 


Hyperlinks]. ( 
© Audio"MP3" file, the sound is of less purity, compared with the 
file with "WAV" extension. ¢ 


© From the File menu, select Paste to export an audio file. ( 
- Third: Complete the following sentences: 

© To add an effect to a video clip, select 
@ To add text to a video clip, from Title menu select .. 
© To export a video file, select 
© OpenShot program is 
e ... program is used to dealing with video files. 


- from File menu. 
and free to sue. 


'eurth: Choose the correct answers: 

© To export an audio file with an appropriate extension, open the 

8 menu and select Export. 
[A] File [B] Record [C] Edit 

© The web page includes texts, . 
[A] hyperlinks ^ [B] images [C] videos [D] ‘All of the previous 


[D] Effects 


© Click... ... button to record voice. 
[A] Play [B] Record [C] Export [D] Effects 
@ Static Web page is designed by ..... 
[A] JavaScript — [B]PHP [C] HTML [D] MS Word 
D Interactive webpage such as the . ... on the Ministry of 
Education Website. 
[A] JavaScript — [B]PHP [C]Contactuspage [D] HTML 


F Test of the half first semester 


- First: Type the term that indicates each of the following: 

O it is the opening page in the website through which other pages 
can be visited, 

© The first stage of design and create a Web Site. 

© The content of these page is previously prepared by the page 

developer. 

Itis designed by HTML, JavaScript, PHP and others. 

© A program to create and audio processing which is an open-source 
software. 

-Second: Put (7) for right answer and (x) for wrong answer: 

© Web site is a document with electronic content on the internet 
which can be shown through a web browser. € 3 


© Audio WAV file, the sound has less storage capacity. (  ) 


© Audacity program that can be run on different operating riens 
like Windows. ) 


لها 
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‘© The sound of a MP3 file extension is the sound high quality 


and clarity. aae" 


© To save an audio file, open File menu and select Export. ( 0 
- Third: Matching from column (A) for column (B): 


Audio "WAV" file — | A [used in creating and editing video files 
2 | Press Export video icon. | B. | to read the effect name 
v minis It is not appropriate for publication via 
3| Audio"MP3* file |C | Websites 
4 | Kaentive and opeaShor | p | To experta video to a fle with suitable 
extension. 
و‎ | Putthe cursor on the | g | tis appropriate for publication via 
effect sign websites. 
- Fourth: Complete the next steps to add text to a video clip: 
© From menu, select Title. 
@ Fill in the dialog box. 
© Press 7 to save text in a file. 


© Name the text file in 
© The text file is found iı 
© Add text file to the ... by drag and drop the text file and add it to a rack. 


Test of the half first semester 


- First: Type the term that indicates each of the following: 

© The content doesn’t change and can’t be edited by the visitor. 

@ it is a document with electronic content on the internet which can 
be shown through a web browser. 

© The second stage of designing and creating a website. 

© Of the components of the web page, used to link between web 
pages to each other. 

© The button is used to record voice. 


لها 


= Second: Put (v ) Tor right answer and (X) lor wrong answer: 
© The Interactive web page content is prepared by the page 
Developer, it is designed by HTML code. € ) 
© The website can be visited on the computer or the cell phone. 
( 


) 
© stage of the Implementation is the second stage to create a 
website. 6 2 
© Publish the website on the internet mean decide the storage 
capacity on a server. € 23 


© To add an effect on the audio clip, click Effects menu. ( 3i 
- Third: Re-Arrange the next steps to add transitions to a video 
elip: 

) Drag and drop one transition and add it to the clip. 

) Click the Transitions tab. 

) Add a transition at the beginning and at the end of the clip. 

) Preview the video. 

) Control the transition time length by drag and drop it to increase or 
decrease it. 

- Fourth: Choose the correct answers: 

9 Click . to finish recording. 
[A] Stop button [B] finish button [C] Clear button [D] No button 


© Press n the keyboard to delete an audio section selected. 
[A] Cii [B] Shift [C] Delete 1D] Alt 

© Select Paste to paste the audio clip on . 9 
[A] Ctrl [B] Timeline — [C] Delete [D] Alt 

© To add an Effect to a video clip, click .. 
[A] Effect [B] Transitions [C] File [D] Edit 


© To save video project, from File menu select: 
[A] Save [B] Save As [C] Store [D] Save Project As 
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To cree a web using HTML. 


By the end of this lesson, the students will be able to 
(1) Identify the following basic rules to create a web page By HTML. 
(2) Identify the structure to create a web page by HTML. 
(3) Add conterit to the web page (text, image, video, hyperlink, .. ete.) 


(4) Format the content of the web page. 
(5) Insert a hyperlink in the web page / linking the site pages. 


C») 


HTML 


(Hyper Text Markup Language) 


$ We have already known the implementation stage is one of the 
main stages to create a website, when the paper design 
becomes a web page, in which all data, texts, images, videos, 
sound files are input and creating hyperlinks between the 
pages using a programming language. 

» We will know in details how to use HTML to create a web 


Page. 
- Also we will see in detail how to create “uisu” web site. 
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* It is a coding language used to create internet pag es which are 
used through an internet browser. 


HTML codes 


* To create a web page, HTML codes are used, these codes are 


called Tags. 
An internet browser executes these tags on the browser page. 


Steps to create a Web 6396 05109 HTML tags 


(1) Create a text file using a text editor to write and edit the 
HTML tags. 

(2) Write HTML tags in capital or small letters. 

(3) Write the HTML tags between these signs "<" . 

(4) Write most of the tags with a start "<..>" and an end "</.> 

(5) Save the text file with the HTML tags with.htm or html 


extension. 
(6) Open the saved file using a web browser and notice the 


- Steps to identify the structure of creating a web page using 
HTML tags: : 
(1) Upload a text editor program. 
(2) Write the tag <html> at the beginning of the code to refer 
that the document is written in HTML. 


The HTML tag is divided into two parts: 
I] The part where the page information is written for 
the browser like page title. 
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- Search via the internet to find a Web page title 
and content. 


* The web page consists of: 
(1) Web page title. (2) Web page content. 
- The title appears in the address bar at the top of the page. 
<HTML> 
سس‎ <HEAD> 
( sue 


</HEAD> 


l 
<Jtitle> | 
BODY> 


To add the text "usu" as a title to th 
Using the Tag: <title> مدرستى‎ </title> 


(1) Start a text editor program, such as Notepad. 
(2) Type the structure to create the page using HTML tags. 
(3) In the field «head»... «head» Type the tag: 

<title> مدرستى‎ </title> 


<html> 
<head> 


£ <title> مدرستى‎ eite ) 
</head> 


Write the tag in a text editor program 
(4) Save the file with the name "school.htm", 
(S) Open the file "school.htm" using the interet explorer to see 
the outcome of the tags you have typed. 


© 
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Adding a content to a web page 


- The web page can include text, image, video and hyperlinks: 


Er Adding a text to the web page 


To add a text " مدرستى جميلة ونظيفة ومتورة‎ " to the content of the 
web page: 


(1) Open the previous text file. 
(2) We type the phrase "مدرستى جميلة ونظيفة ومتطورة"‎ inside the 
<body> ... </body> tag, as the following: 
«body» مدرستى جميلة ونظيفة ومتطورة‎ </body> 


| «html 


<head> 
( «title» منرستى‎ </title> 


The structure 


«html» J 
Write the tag in a text editor program 
(3) Save the text file with the same title "school-htm". 


(4) Open the file "school.htm" (the web page) using a web 
browser to se the result of executing the typed tgs.» 


Gs) 


ETE EU 


mean ntn e 
‘Open the file "school.htm* using the internet explorer 


(1) Type the HTML tags for the previous practice using capital 
letters. 

(2) Leave spaces between the words of the text. 

(B) Use the enter key to leave lines between the words of the 


_ Write the tag in a text editor program 


— 
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(e) Save me text nie with .htm extension. 
(5) Display the file using the internet explorer. 


‘Open the file "school.htm" using the intemet explorer 


- You can write the HTML tags with Capital letters or Small 
letters. 

- The internet explorer isn't affected by the left spaces in the file 
or by moving to a new line by pressing the enter key. 


- First: Put (7) for right answer and (x) for wrong answer: 

© The HTML tag is divided into two parts, body and foot. ( ) 

© Notepad is a coding language used to create internet pages which 
are used through an internet browser. 6 3 


© An internet browser executes HTML tags on the browser page. 

( ) 
© HTML codes are called PHP. ¢ D 
) 
) 


HTML codes are used to create a web page. ( 
@ The HTML tag is divided into two parts, body and head. ( 


Gs 


© We can not write HTML tags in capital or small letters. (| ) 

© We must write the HTML tags between these signs "#" ..... "#". 
C 3 

© We save the text file with the HTML tags with „htm. t ) 


© HTML is a coding language used to create interactive web 


Pages. € ) 
- Second: Choose the correct answer from between the brackets: 
© Type the .............. to create the page using HTML tags. 


(Structure — HTML - <html>) 
. is the coding language used to create web pages. 

(Basic rules - HTML — <html>) 
at the beginning of the code to refer that the 


(<html> — HTML - <html>) 
© Write most of the tags with a start . 
اة = اانا‎ = 


© Write most of the tags with an end 


@ Save the text file with the HTML tags with extension ".... 
ons ^ 


(Htm - Html - الى‎ of the above) 
the part where the page information is written for the 
browser like page title. 
(head - title — body) 
© Write the tag ......... at the end of the code to refer to the end of 
the HTML document. 
(<html> - HTML - <html>) 


لها 
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~ Third: Matching from column (A) for column (B): 
A) Junin (E 


the page information is written 
1 | <body>... <body> | A | for the browser. 


refer to the end of the HTML 


Of the Web page content | B | rian 


Web page title. 


Texts, images and hyperlinks. 


e Jefe] so 
m [olal wm 


the part where the web page 
content is written. 


Re-arrange the steps to add the text "yase" as a title 


to the web page 
c ) In the field <head>...</head> Type the tag 
<title> مدرستى‎ </title> 
n ) Start a text editor program. 
€ ) Open the file "school.htm" using the internet explorer to 
see the outcome of the tags you have typed. 
( ) Type the structure to create the page using HTML tags. 
€ ) Save the file with the name "school.htm". 


- Fifth: Put each of the following concept in its right place to get 
the correct sentence: 
(text file - create - HTML - tags - <html>) 

O Write tags in capital or small letters, 

© To write and edit the HTML tags, ... 
editor. 

© Write the tag at the beginning of the code to refer that the 
document is written in . 

© Write the HTML between these signs "<" ...... ">". 

© Save the ....... with the HTML tags with htm or „html extension. 


Goo} 


a text file using a text 


| 5 work 


- First: Complete the following seatenc 
© The HTML tag is divided into two parts, 
© HTML codes are called . 
© The HTML tag is divided into two parts, 8 
© .......... is a coding language used to create internet pages which 
are used through an internet browser. 
© We can write HTML tags in ... 
© An internet browser executes HTML tags on the 
© We must write the HTML tags between these signs " 
© We save the text file with the HTML tags with .. 


and. 


or. .. letters. 


© Write the tag . at the beginning of the code to refer to the 
HTML document. 
Second: Put (>) for right answer (x) for wrong answe 


© HTML is the coding language used to create web pages. ( — ) 
© Write most of the tags with a start </.........> € y 
© "Title" the part where the web page content is written.  ( ) 
) 
) 


© Save the text file with the HTML tags with extension "doc" ( 
© Write most of the tags with an end </.........> ( 
© "Head" the part where the page information is written for the 


browser like page title. C) 
@ To write and edit the HTML tags, create a text file using a text 
editor. ©) 
© We write HTML tags only in capital letters. © 3 
101 
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-~ The default direction of web page content from left to right. 
~- We have to change the direction of the page to make the content 
from right to left, to suit the Arabic language when designing 
a web page with Arabic view 
- We use the property "dir" to do that, 
- We specify the direction of the web page according to the i 
value of the property "dir" Write the tag in a text editor program 
«The table contain the values of the property "dir"y 


(3) Save the text file with the same title "school.htm". 


(4) Open the file "school.htm" (the web page) using a web 
browser to see the result of executing the typed tags. 


OTE) 


7 


[urn 


- Use the previous practice to change the direction 
of the content of the web page from right to left. 


- Do the following: 


(1) Open the previous text file. 
(2) Editing the code by adding the dir to the <body> tag, 
* Assign the value tl to dir property to change the direction The page orientation has become right-to-left. 


‘<body> to be <body dir = "rtl"> 


102 


CamScanner ب‎ Lis الممسوحة‎ 


- Make a comparison between the effect of the value | 
"rtl" and the value "Itr" to dir property on the 
direction of the web page content as follows 


(A comparison that shows the effect of the values of dir property) 


The direction of the content from 


- There are many formats which can be applied to the content of 
the web page to look more attractive. b 


- Some of them are applied on the text of the web (gm 
page and some of them are applied on the background of the 
web page: 


E 


. Formatting the text includes many processes, such as: - 

(1) Type the beginning from a new line 2 

(2) Text alignment 

(3) Putting spaces between words 

(4) Formatting the font (face, color, and style). 
Formatting the web pages includes: fe€- 
(1) Changing the color of the web page background. E ns 7 
Q) Putting an image as a background webpage. = 


[iJ Formatting the text in the Web p 


- We use the <br> tag to start writing in a new line. 
- We use the <br> tag to display the text in the web page in two 
lines. 


- Type the following text so that it appears on the web 
Page on two lines: 

7 School: Al Shrouk. 

Eie Kem سحت‎ 


* Do the following: 
(1) Open the previous text file. 
(2) Add the text "School: Al Shrouk". 
"Then add the tag <br> and add the text "Name: Kenzi Mohamed" 


Ges] 
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<html> 
<head> 

( <title> مدرستی‎ </title> 
</head> 


<body dir = "rti" 
| المدرسة : الشروق‎ 


The structure 


<br> 
الاسم : كتزى محمد‎ 
‘</body> 
<html> 
Write the tag in a text editor program 


(3) Save the text file with the same title "school.htm". 


(4) Open the file "school.htm" (the web page) using a web 
browser to see the result of executing the typed tags. 


-~ Make the phrase "School location" appears in the 
middle of the line. ص‎ 
2 


* Do the following: 


(1) Open the previous text file. 
(2) Add the <center> school location </center>, 


<html> 


<head> 
( <title> مدرستى‎ </title> 
</head> 
<body dir ="rtl"> 
<center> موقع رة‎ </center> 


مدرسة : الشروق 
<br>‏ 
MET‏ 


The web page by the Explorer 
after executing the code 


<html> 
‘Write the tag in a text editor program 


(3) Save the text file with the same title "school.htm". 
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(4) Open the file in the internet explorer. 


(1) Open the previous text file. 
(2) Writing the code "site &nbsp; &nbsp; &nbsp, &nbsp; the school". 


The web page by the internet explorer after executing the code 


= The phrase "School location" appears in the middle of the line. 


Formatting the text in the web page 


# We use the symbol "&nbsp;" to control the number of spaces 
between words. 
9 We repeat it according to the number of the needed spaces 
between words, 
When leaving any number of spaces between words 
in the file, the explorer will deal with it when 
viewing the page as one space. 


| 


- - Write the phrase "School Website" and putting four 
spaces between the two words, using &nbsp; symbol. 
= 


[Ig 


<body dir = "rti"> 
<center>, 3 4 

1,43 &nbsp; &nbsp; &nbsp; &nbsp; ús 
</center> 


(3) Save the text file with the same title "school.htm". 
(4) Open the file in the internet explorer. 


59 m 
REE the phrase "School Website" and putting four spaces 
between the two words. 
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-~ First: Put (¥) for right answer and (x) for wrong answer: 


© A web page can not contain a Hyperlink. ( ) 
B Web page content write with a start "<title>" and an end "</title>" 
( ) 


© Web page content write with a start "<body>" and an end 
"efbodys". € 3 
© A web page may contain (image - Video -text-etc..). ( ) 
© We use the <br> tag to start writing in the same line. — ( ) 
© symbol (&nbsp:) is used to putting only one distance between the 
words. € ) 


@ Web Browser is used to open the saved file with htm extension. 
€ 


) 
© Use a text editor for writing HTML tags. t£ dy 
HTML tags must be typed in capital letters only. C 2 
© To put a text in the middle of the line, we use <br> tag. ( ) 


- Second: Re-arrange the next steps to write the phrase "School 
Website" and putting four spaces between the two words, 


using the symbol " &nbsp; 

) Save the text file with the same title "school. htm". 

) Upload a text editor program. 

) Open the file in the internet explorer. 

) Writing the code "site &nbsp; &nbsp; &nbsp, &nbsp; the 
school". 

) Write the tag <html> at the beginning of the code to refer 
that the document is written in HTML. 


- Third: Choose the correct answer from between the brackets: 
© Write most of the tags with a start ">. >" and an end ", 


(or - browser) 
© Open the saved file using a web .. 
(<br> - 9 
© Changing the direction of the web page using ... 
(<br> - dir - browser) 
© We use the .... tag to display the text in the web page in two lines. 
(<br> - &nbsp; - ml - <body>) 
B To make the page orientation from left to right, assign the value 
to dir property. 


(<center> = & nbsp; 


© We use the symbol ". 
(<br> - 


& nbsp; - 

tag, to put a text in the middle of the line. 
(<br> - &nbspi - ml - <center>) 

© When leaving four spaces between words in the file, the explorer 

will deal with it when viewing the page as .. 

(four spaces - three spaces - one space - two spaces) 


- Fourth: Complete the structure of creating a Web page using 
HTML: 


© Weuse 
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<html> 


( <head> 


<title> 0% </title> 
<body dir 


</head> 
<font face = "Andalus" color 
مدرستى جميلة ونظيفة ومتطورة‎ 
</font> 
</body> 
</html> 


Write the tag in a text editor program 


5 
I" size = "6" > 


(3) Save the text file with the same title "school.htm". 
(4) Open the file in the internet explorer. 


** The code: «Font face = "Andalus"> 
- Selecting the font type using the property "face". 
- Then we selected the "Andalus" as a value for property. 
# In case you don't use the «font» tag, the font displays on 
the web page with the default shape. 
© In case you don't use the «font» tag, the font color displays 
on the web page with the default color. 
$ In case you don't use the <font> tag, the font size displays on 
the web page with the default size. 
® After using the close </font> tag, this finishes the effect of the 
<font> tag on any text, written later. 


Formatting the font in the web page (b, u, i) 


584 Format the font in the web page | 


~ There are several tags through which the font can be formatted. 
- Some of these Tags in the following table: 


ل ا Lotu‏ 


<i> Italie 


a mn) 


NL 
The web page after executing the code 


<b> Bold 


| ¥ Format the font in the web page to make the phrase _ 
(00 "مدرستى جميلة ونظيفة ومتطورة"‎ underline. 
- Do the following: 


Gs) 
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~ Fhbme work 


- First: Complete the following sentences using the following: 
(&nbsp; - web page - <center> - </body> - Hyperlink - <br> - 
<body>) 


04 . may contain (image - Video - text - etc. 

© We use the „tag to start writing in the second line. 

© symbol .......... is used to putting only one distance between the 
words. 


D A web page can contain a 


© Web page content write with a start and an end ". 
© To puta text in the middle of the line, we use 


z Second: Matching from column (A) for column (B): 


1| <> | A | Toputatextin the middle of the line. 
2| &nbsp; | B | Web page content write with a stae. | 
3 | texteditor | C | A web page can contain a hyperlink. 
4 | <center> | D | We use the tag to start writing in a new line. 
s | <body> LE | Use for writing HTML tps. 
F | Add blank space between words. 
z Third: Select the different word: 


@ HTML - PHP — Microsoft Word — JavaScript 
© <body> — «center» - <head> — <html> 

© Hyperlinks — Texts - Tags - Images 

@ ri - dir- &nbsp; - ltr 
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e font in the web by 


# Formatting the font in the web page (font type, font size, font color 
and font style). 
- The text is formatting by the <font> tag. 
- The <font> tag has a group of properties as follows: 
| 
| 


Face Choose the font type. 
Color | Choose the font color. 
Size | Choose the font size. 


OREI To change the font size: 
-The browser identifies seven different font sizes that we choose 


by the property "size" the value is from "1" to "7". 


سند س | 


~ Create a web page with align right. 

~ And contains the text جميلة ونظيفة ومتطورة"‎ hae", 

- With Andalus face, red color and size 6. ox, 
32 


* Do the following: 
(1) Open the previous text file. 
(2) Write the following code: 
<font face = "Andalus" color = "red" size = "6"> 
"مدرستى جميلة ونظيفة ومتطورة"‎ </font> 
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(1) Open the previous text tile. | 

(2) Modify the previous web page file, format the font by 
underlining the phrase "مدرستى جميلة ونظيفة ومتطورة"‎ 

(3) Add the following code: <u> مدرستى جميلة ونظيفة ومتطورة‎ </U> 


** Format the font in the web page to make the phrase: 
(00 "مدرستى جميلة ونظيفة ومتطورة"‎ italic. 


(1) Open the previous text file. 


tek @) Add the following code: «i» مدرستى جميلة ونظيفة ومتطورة‎ </i> 
| سر‎ <htmi> 
<head> 
dir = "r"> 
a الت زا‎ <head> 
<font face = "Andalus" color = "red" size = "6" >| 
<u> مدرستى جميلة ونظيفة ومتطورة‎ </y> <body dir ="rtl"> 


<font face = "Andalus" color = "red" size = "6" > 
<i> مدرستى جميلة ونظيفة ومتطورة‎ </i> 


(4) Save the text file with the .htm extension. 
(5) Open the file in the browser. (3) Save the text file with the -htm extension. 
(4) Open the file in the browser. 


[> حيست‎ Outen ممصي‎ © > c] DES 


The web page after executing the code The web page after executing the code 


Gs} Gy 
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neral Revisi ? 


% Format the font in the web page to make the phrase: | | - First: Choose the correct answer: 
" 7 a ya if 
"مدرستى جميلة ونظيفة ومتطورة'‎ bold. © We Open the file (Web page), using the .......... 
F | [a] Microsoft Word. [b] Internet browser. 
EO previous e: [c] Microsoft Excel. [d] Photoshop. 
(2) Add the following code: <b> منرستى جميلة ونظيفة ومتطورة‎ </b> | © We are writing HTML commands in the . Program. 
[a] Audacity. [b] Openshot. 
<html> [c] text editor. [d] paint. 
<head> © Write HTML tags in .. .. letters. 
| </head> [a] Capital. [b] Small 
| [c] Capital or small. [d] Symbols 
‘<body dir = "rtl" | © We write the Web page content in the .. 
| <font face = "Andalus" color = "red" size = "6" > | 5 brag Lnd 
| <> adu AU Medi «o © To control the type, size and color of the font, using the ....... tag. 
</font> [a] <title>. [b] dir 
</body> [c] ril. [d] «font». 
<html> - Second: Complete the next steps from between the brackets to 
Write the tag in a text editor program Format the font in the web page to make the phrase: 
"مدرستى جميلة ونظيفة ومتطورة"‎ bold. 
(web browser - <b> مدرستى جميلة ونظيفة ومتطورة‎ </b> - html - 
beginning — text) 
(3) Save the text file with the .htm extension. O vptoada. T€ 


(4) Open the file in the browser. Samo amissis 


that the document is written in HTML. 
© Add the following code: ... 
© Save the text file with .htm or . 
© Open the file in the ... 


of the code to refer 
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7 Third: Put (¥) for right answer and (x) for wrong answer: 
© The browser identifies seven different font sizes that we choose 
by the property "size" the value is from "1" to "70". (+) 
© There are several Tags, that are used to format the font in the web. 
€ y 
© To format the font to be italic, we use the "<u>" tag. — ( ) 
© Save the text file with the HTML tags with .doc or .txt extension. 
C. 
© After </font> tag, the text displays with the default shape. ( ) 


@ Interactive web page is designed by HTML, JavaScript, PHP and 


others. ( ) 
@ The sound of a MP3 file extension is the sound high quality 
and clarity. 20 


© To add text to a video clip, from File menu, select Title. ( ) 


- Fourth: Type the right number in the front of suitable function: | 
2 | 


(€) Tracks: They are similar to layers where images, sounds or 
video caption clip is put on the track. 

( — )Current clip (image, sound or video). 

(/— ) Ruler (to show the time length on the timeline). 

€ ) Play Head (reads the current clip on the timeline to show in 
Preview Window). 


L 


- First: Complete the following sentences: 
© To add text to a video clip, from Title menu, select ... 


© To Export the video, click Export Video icon [m 


© Audacity program running on operating systems like Windows. 
and 


© The sound ofa ...... 

© When we choose 

© When you assign the value "ril" for the 
orientation becomes right-to-left. 

@ We repeat the symbol ...... 
needed spaces between words. 


. file extension is less storage capacity. 
.. effect, the selected clip is repeated. 


.. property, the page 


according to the number of the 


© Click on the icon "UP in the Main Toolbar, to... 


~ Second: Put (¥) for right answer and (x) for wrong answer: 
© Website is a webpage or more, connected with each other, with 


a certain name and Web address. € 2 
© Web page is the main page in the website through which other 
pages can be visited. Co) 
© interactive web page is designed by HTML code, 2 
© The components of the web page (text - images - sound - video - 
Hyperlinks). € ) 
© We use the symbol "& nbsp;" for putting only one distance 
between the words. م‎ 3 
© We use the <title> tag to start writing in a new line. 2 0 
© To format the font to be bold, use the <br> tag. € y 
‘© We can not formatting the font in the web page. ©) 


m 
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GEM كك اباب سبد‎ —À"—9 
creating a website: 
) Prepare and develop the web pages. 
) Planning to create a website, 
) Publish the website on the internet. 
) Design the web pages. 
) Implement the web pages. 


- Fourth: Choose the correct answers from between the brackets: 


© From the File menu, select to export an audio file. 
(Cut - Paste - File - Export Audio) 

an audio clip, from the Edit menu select Cut. 

(Cut — Paste — WAV - &nbsp;) 

© To listen through the speakers to the sound, click 
(Stop button - Play button - Record button — Effect) 

© Use the symbol .. to add blank space between words, 

(<br> - <i> - <b> - &nbsp:) 

© To start voice recording through the program, click the 
(Stop button - Play button - Record button - Effect) 

© Using the”. " program to create and audio processing 


which is an open source software. 
(OpenShot - Close source - Audacity - none of the previous) 


© 76 


- Fifth: Type the term that indicates each of the following: 

@ It is a webpage or more, connected with each other, with a certain 
_ name and Web address. 

@ The content doesn’t change and can't be edited by the visitor. 

© To format the font to be bold. 

I To format the font to be underline, 

© It is used to process video files, runs in Windows. 


rmatti 


Ú Selecting the background color for the Web 
page by the property bgcolor 


# To select the color of the web page background, use the 
property bgcolor that relates to the <body> tag. 


0 | INCI ty - 
- Use the property bgcolor for selecting the green 


color as the web page background. 
- Write the tag <body bgcolor = "green"> 


© Do the next steps: 
(1) Start a text editor program. 
(2) Type the structure to create the page using HTML tags. 
(3) Write the tag «body bgcolor = "green"»- 


<html> 
(one 
</head> 


[** bgcolor = "green"> 
</body> 
<html> 


Write the code in the text editor program. 
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493) Save the nie with the .htm extension. 


(5) Open the file "Web page" using the internet explorer to see 
the outcome of the tags you have typed. 


The web page after executing the code 


The following table contains some names of colors that 
can be used as a value to the property bgcolor: 


"Color name" 


"Color" 


BE 7 | Adding image as a web page background | 

| by the property Background 

© We use the property Background that connects to the <body> 
tag, to add an image as a web page background. 


cio, - 
E Use the property Background for adding an image 


as a web page background. 
~ Write the tag <body Background = "image,jpg"> 


® Do the next steps: 
(1) Prepare an image file to be put as a web page background. 
(2) Save the file image with the name "image jpg" inside the 
same folder that is saved in the web page. 
(3) Open the previous text file. 
(4) Write the code: <body background 


<head> 
¢ </head> 
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(S) Save the text file by the .htm extension. 
(6) Open the file in the internet explorer. 


— € row 
IO fe سسدمه تسمه‎ =] 9] x n rr EE: 
2 8-B-- rtr ere tone O- | 


When you display the image file by the Internet browser, 
must be image file exist inside the web page folder. 


Dealing with images in the Web page 
a Insert image inside the web page by «img» tag 


® To insert image in the web page, we use the property src that 
connects to the <img> tag. 
® Do the following: 
- Select the place where we save the image file. 
- Select the name of the file. 


ACV ya 5 
- Design a web page, its content as follows: 


7 The text "مدرستى جميلة ونظيفة ومتطورة"‎ js red and underlined. 
- The school image displays under the text. 


= aes — | 


(1) Prepare an image file. 

(2) Save the file image with the name "school.jpg" inside the 
same folder that is saved in the web page. 

(3) Start a text editor program. 

(4) Write the necessary code. 


<html> 1 
<head> | 
</head> | 
<body> o 
<font face = "Andalus" color = "red" size = "6"> 

>< مدرستى جميلة ونظيفة ومتطورة‎ </> | 
</font> | 
<br> 
<img sre = "school.jpg"> 
</body> 
<html> 
Write the code in the text editor program. 
(5) Save the file with the ".htm" extension. 
(6) Open the file "Web page" using the internet explorer. 


—  — — 
The web page after executing the code. 
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N 


ices: 


- In the following code: <img src = "school.jpg"> 

The image file and the web page file must be in the same 
folder, so we write the image file name and its extension with 
the property src. 

* In case, there is a file image in another folder, we must write 
the complete path of the image file. 


EXET Se | 


- Search on the internet for the types of image files extensions 
such as (Jpeg -.bmp - .gif - png - „tiff - raw), which we can 
used in the web pages. 


Formatting the images in the web pages 


© The inserted image can be formatted by controlling the 
dimensions (height & width) and align it with the web page. 


Á Controlling the image dimension in the web page 


We control the image dimension through the properties 
(height) and (width) that relate to the <img> tag as follows: 

* Height property is used to select the image height. 
Example: height = "200" 

* Width property is used to select the image width. 
Example: width = "300" 


RAE UR ee P EE AN"‏ اا لد 
dimensions.‏ 


- Insert the image and make its dimensions as follows: 
Height = "450" pixel, and Width = "800" pixel. 
= In the previous workshop, we write the following code: 


| <img sre = "schooljpg" height = "450" width = "800"> 


® Do the next steps: 


| (1) Open the previous text file. 
(2) Write the following code: 
<img sre = "schooljpg" height = "450" width = "800"> 


<html> 
<head> 

Ee 

<font face = "Andalus" color = "red" size = 
<u> مدرستى جميلة ونظيفة ومتطورة‎ </a> 
</font> 


| <br> 
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(3) save the text file with the .htm extension. 
(4) Open the file in the Internet Explorer. 


The text with the image at the same line and the 
text aligns the middle of the image. 


© Do the following: 
~ Align the image to right of the web page. 

| - Toalign the image to position the text align the top of the 

image. 


- To align the image to the right of the web page, the code is 
align = "right". 


- To align the image to position the text to the top of the image, 
the code is align = "top". 


Gz) 


- First: Put (7) for right answer and (x) for wrong answer: 
To change the direction of the web page content, use <br> tag. 
5 5 
( ) 


© We align the image through the property Align to the <img> tag. 
1 ) 


© In case we save the image file with the web page file in the same 
folder, the property src takes the image file name value and its 
extension only. ( ) 


© To align the image to position the text to the top of the image, 
the code is <img src =" ( ) 
© Before </font> tag, the text displays with the defaultshape( — ) 
- Second: Re-arrange the next steps to change the background. 
color of the web page to red: 
) Writing the code: <body bgcolor 
) Open the file in the internet explorer. 
) Save the text file with „htm or html extension. 
) Write the tag «html» at the beginning of the code to refer. 
that the document is written in HTML. 
€) Upload a text editor program. 
- Third: What is meant by each of the following sentence: 
O >< مدرستى جميلة ونظيفة ومتطورة‎ </i> 
© > img src = "school.png"> 
© «ic» My School </title> 
© <body background = "image.jpg"> 
© <font face = "Andalus"> الصف الثاتى‎ </face> 


"red"> 
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220011011110001 
(1) Start a text editor program. | 
(2) Write the following code: | 
<a href = "http;//www.moe.gov.eg" > وزارة التربية والتعليم‎ </a> 


Aur | 
Qt | 
</head> 


| 

<body> | 

<a href = "http;//www.moe.gov.eg" > وزارة التربية والتليم‎ </a>|| | 

</body> | l 
pues 1 

Write the code in the text editor program I 

(3) Save the text file with .htm extension. 

(4) Open the web page in the browser. 

(5) Click the hypertext in the web page. 

(6) The Ministry of Education site is loaded. 


When we cick the hyper text he Ministy ste is loaded 


a Insert a hyperlink to an image 


* To create a hyper image: 
(1) Display the image by «img» tag. 
(2) Put <img> inside <a>...</a> to make it a hyperlink. 


- 


- Create a web page that contains a hyperlink image. | 
- When we click the image, we move to the web 
page "My school". 
- Modify the code in the previous web page to replace the text. | 
by the image "tools.jpg. 


- To change the hypertext to a hyper image as follows: 


"myschool.htm" [E] <img src = "tools.jpg' 


The web page title that | [Appears as a hyper image 
| we need to move to in the browser = 


Hyperlink: <a href = 


* The steps of creating and executing a hyperlink image: 
(1) Start a text editor program. 

(2) Write the following code: 

<a href = "myschool.htm" > <img src = "tools,jpg"> </a> 
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<title> | Choose a title to the web page. 
Finishing the current line and start a 


new line ا‎ 
<center> | To add a text in the middle of the line 
To insert a space between words in 


E | "emen --A 
co 
She 
—— e Written at the beginning of the code 
<html> | to refer that the document is written 
<body> | by html. 
<a href = "myschool.htm" > «img src = "tools.jpg"> </a> <head> ES Lele ‘Wine the web 
عي‎ | A place where we write the content | Dir bgcolor 
spank J | <body> | that will appear inside the web page | — background 
| 


Write the code in the text editor program 


(4) Open the web page in the browser. 


(3) Save the text file with „htm extension. | 


(5) Click the hyper image in the web page. &mbspi | ihe browser 
(6) The web page "My school" is loaded. «font» | To control the font format. Face-color-size 
<u> | Underlined. 
| <b> [Bola i| 
<> Italic. 
i <img> | To display the image in the web page. | S'e — height — 


To insert sound as a background to 
<Bgsound> | من‎ web page. 


Sre 
<embed> | Add a sound or video to the web page. Sre 
<a> | To create a hyperlink. Href 

Type 


To input data through the web page 

«Input» | by different ways depending on the 
property value type. 

form» | Create a model in the web page. ‘Action 


Gs) 
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~ First: Choose the suitable correct answer: 
(1) HTML refers to the phrase. 

a- Hyper Text Markup Library. 

b- Help Table Made Layout, 

©- Hyper Text Markup Language, 
Q) The web page which uses HTML 


JavaScript and PHP beside 1 

design of the web page وز‎ 5 ides HTML in the 
page is to 

a- Interactive eU de pego... 


b- Homepage. 
© subpage 
(4) To display a t it 
a Head 8 On the web page, we write the text inthe. 
b- Title 
©- Body 


9 We it 
a de Save the HTML file with the extension ... 


(7) To select the background color of the web page, we use the 
property .. 
a- bgcolor 
b- background 
e- color. 
(8) The property which is connected to the <img> tag, one of these 
properties is...... 


a- path 
b- href 
esre 

(9) The <a> tag, is used to . inside the web page. 
a- align text b- add a hyperlink €- play video 

(10) To select the font type in «font» tag, we use the property .. 
a- Font name b- Font size e- Font face 

- Second: Match (A) from (| 


‘A document with e-content that is published 


1| Website | A | on the internet and is displayed by the 

browser. 

Display read-only information without the 

2 | Homepage | B | ability to do processing from guests to the 
content. 

A place on the internet that is consisted of a 

3 | Webpage | © | web page or more and is visited through 

specific titles, 

7 "The first page on the web site and through it 

4 | Static page | D | we ا‎ the rest pages. 


Dynamic / | E | The property to move to the site pages. 
5 | Interactive y | Information page that displays an interactive 
Page content to the guests to interact and process it 


Gs) 
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~ Lhird: Put (v) for right answer and (x) for wrong answer: 
(1) HTML is used to create interactive web pages. 2) ) 
(2) JavaScript is used to modify the static page to interactive page. 

€ ) 
(3) The tag that is written at the beginning of the code to refer that the. 


document is written by html is <title>. € 4 
(4) To control the number of the spaces between words, we use the 
symbol &nbsp;. È j 


(5) To add image to the web page, we use the <img> tag. ( ) 


Fourth: 
(1) Type the main code which is needed to create the HTML file? 
(2) <img sre = "school.png"> 
Although there are no errors in the previous code, the image 
doesn't display on the web page when loading it by the browser. 
Give a reason? 


- Fifth: Explain what is meant by the following codes: 
(1) «Title» My School <Title> 


(2) <body bgcolor = "green"> 


(3) «Img sre = "school.png"> 


(4) <font face = "andalus"> 


(5) <bgsound sre = "egypt.MP3"> 


- First: Complete the following sentences from between brackets: 
© An internet browser executes .. tags on the browser page. 
(static - HTML - <a> - <img>) 
© To insert a hyperlink text, use the 

(static - HTML - <a> - <img>) 
© To insert an image in the web page, we use 
(static - HTML - .htm - <img>) 
© We save the text file with the HTML tags with ... 
(static - htm - <a> - <img>) 
© HTML is a coding language used to create 
(static - HTML - <a> - <img>) 
- Second: What is meant by each of the following sentence: 
© <bgsound src = "egypt. MP3"> 
© <a href = "myschool.htm"> <img src = "tools,jpg"> </a> 
© <body bgcolor = "green 
© <font face = "andalus"> 
© <body dir = "RTL" 
- Third: Complete the following sentences: 
o the part where the page information is written for the 
browser like page title. 
© The tag is the end of the <a>. 
© We control the ........ dimension through the properties (width) 
and (height), 
© To insert image in the web page, we use the property 
connects to the <img> tag. 
© To align the image to the left of the web page, the code is align 
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. tag. 


that 


AMMES njrotc une cat steps 20 add the text My School as 
a title to the web page 

O Sura . editor program. 

© Type the structure to create the page using ... 


© in the field < type the tag 
<title> My School </title> 


o. the file with the name "school.htm". 


© Open the file ... using the internet explorer to see the 
‘outcome of the tags you have typed. 


e 


First: Complete the following sentences from between brackets: 

O We must write the HTML tags between the signs .. 
(<br> - <...> - <title> - html) 

tags in capital or small letters. 
(stags> - <...> - body - html) 

D HTML codes are called 

(<tags> - <...> - head - html) 

9 The HTML tag is divided into two parts, . 
(Gntemet browser - title and head- head and body - html) 

B HTML is a coding language used to create internet pages which 

are used through an .. 
(internet browser - title and head - head and body - html) 
‘Second: Put (¥) for right answer and (x) for wrong answer: 

D To write and edit the HTML tags, create a video file using a video 

editor. [2 


© we can write 
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© Write the HTML tags between these signs "<"......">". ) ) 


© Add an image as a web page background and when you display 
the file by the Internet browser, must be image file exist inside the 


web page folder. ©) 
© We use the measurement unit "Meter" to measure the image 
dimensions. € ) 


© We can not insert the sound as a background to the web page to 
listen to it when we download the web pagebythebrowser( — ) 


- Third: Matching from column (A) for column (B): 
Face A | Change the web page background color. 

Right B | Add an image as a web page background. 

"right" | C | Choose the font type. 

D 

E 


background Align the image to the right. 
Bgcolor Align the image to the right of the web 
page. 
- Fourth: Complete the following sentences from between the 
brackets: 
(sre - <center> - & nbsp; - <embed> - dir) 


... tag supports the video file of the type (.swf - avi - 


"EFmmm 


© The 
mov). 

© To put a text in the middle of the line, we use 

© When you assign the value (rl) for the ... 
orientation becomes right-to-left. 

© We insert the video inside the web page, by using the <embed> 
tag and the property ... - 

© we usc the symbol "... 
between the words. 


.. tag. 
. property, the page 


." for putting only one distance 
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- First: Re-arrange the next steps to add image as a web page 
background by the property Background: 

) Save the text file by the .htm extension. 

) Open the previous text file, 

) Prepare an image file to be put as a web page background. 

) Open the file in the internet explorer. 

) Save the file image with the name "image! jpg" inside the 
same folder that is saved in the web page. 

©) Write the code: <body background = "image! .jpg"> 


- Second: Put )”( for right answer and (x) for wrong answer: 

© Write the tag </html> at the beginning of the code to refer that the 
document is written in HTML, ( 

© Head the part where the web page content is written. — ( 

© Type the structure to create the page using HTML tags. ( 

© Save the text file with the HTML tags with doc extension. ( 

© HTML is the coding language used to create web pages. ( 


- Third: Choose the correct answer: 
@ We use the measurement unit . 
dimensions. 
[A] Meter 
[B] pixel 
[C] Millimeters 
[D] Centimeter 


Gs) 


. to measure the image 


© Property ... 
[A] img 
[B] sre 
[C] <br> 
[D] bgcolor 
© Weare control the image dimensions using the properties . 
[A] pixel 
[B] Width 
[C] Height 
[D] width and Height 
© We use the sou tag to start writing in a new line. 
[A] </font> 
[B] sre 
[C] <b> 
[D] bgcolor 
© After 
[A] </font> 
[B] sre 
[C] <br> 
[D] bgcolor 


. tag, the text displays with the default shape. 


- Fourth: What is meant by each of the following sentence: 
© <body> My School </body> 

© «font color = "red" > Arabic Republic Of Egypt </font> 
© <b> مدرستى جميلة ونظيفة ومتطورة‎ </b> 

© <embed src = "imternetavi"> 

© <Title> My School </Title> 


Gs] 
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(4) Open the file "Web page" using the internet explorer. 


t 


The web page aller executing he code 


Dealing with images in the Web page 


© We align the image through the property Align to the <img> 
tag. 
- The following table has the values of the Align property: 


Left |Align the image to the left. 


Middle | Center the text in the middle of the image. 


ee) 


- Modify the web page in the previous practice as 
follows: 

- Format the image to display the text with the image 
at the same line and the text aligns the middle of the 
image. 


® Do the next steps: 
(1) Open the previous text file. 
(2) Write the following code: 
'shool.jpg" align = "middle"> 


e 
<font face = "Andalus" color = "red" size = "6"> 
<u> مدرستى جميلة ونظيفة ومتطورة‎ </a> 
</font> 
<br> 
<img src = "school.jpg" align = "middle"> 
— 


Bottom | The text is positioned align down the i 


Top  |Theextis positioned align top the image. 


Write the code in the text editor program 
مه سد بسا‎ ore 
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~ Fourth: Matching from column (A) for column (B): 
Colu 


To control the number of spaces 


[Home كينا‎ 


-First 


1 E A : 
2 body To change the font style. 
E Used to display the text in the 
ici ees © | web page in two lines. 
Refer that the document is written 
i =e P | in HTML. 
E v y | The part where the Web page 


content is written, 


- Fifth: Put the suitable concept in it's place: 

(left - html - <center> - two - Head - right) 
© Write 
e 


. tags in capital or small letters. 


.. the part where the page information is written for the 
browser like page title. 

© The HTML tag is divided into . „parts. 

o the value "rtl" to "dir" property to change the web page. 
direction from . to... 

© To puta text in the middle of the line, we use ... 


NT 
- Sixth: Type the term that indicates each of the following: 
@ Property is used to control the web page background color. 


© We control the image dimension through the two properties. 

© We use the measurement unit to measure the image dimensions. 

@ To add an image as a web page background, we use the 
property that relates to the <body> tag. 

© We align the image through the property. 
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(Background - Bgcolor - Width - pixel - Align - Height) 
© We control the image dimension through the .. 
properties. 
B To add an image as a web page background, we use the 
property that relates to the <body> tag. 
© We align the image through the .. property. 
property is ased to control the web page background 


and ... 


.. to measure the image 


1| >< |A | Align the image to the right. 

2 | Align | B | Choose the font type. 

5 Right c Qo ent the direction of the web page 

4 dir D | to align the image. 

s | mes E [The text is positioned align top the image 
F | To make the words Underline 


O We use the <body dit |" tag to display the text in the web 
page in two lines. C vy 
© <img src = "schooljpg" height = "50" width = "RO" ( — ) 


© In case you don't use the <font> tag, the font displays on 
the web page with the default shape. € 
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| . Q) Modify the code as the following: 
| <bgsound src = "egyptamp3"> 


- We can insert the sound as a background to the web page to 


listen to it when we downlond the web page by the browser. <body> 
| ( <bgsound sre = "egypt.mp3"> 
* We insert the sound as a background to the web page using <body> 

| 

<bgsound> and the property src. | عدت‎ 
* The "Internet Explorer" is the only browser that supports the — | : 

<bgsound> tag to insert the sound as a background to the web. ‘Wie fhe code in fhe text scilor program 

page. (3) Save the text file with the htm extension. 


- In the following code: <bgsound src = "egypt.mp3"> (4) Open the web page file in the Internet Explorer. 

+ In case we save the sound file with the web page file in the 
same folder, the property src takes the sound file name value 
and its extension. 

* In case, there is a file sound in another folder, we must write 
the complete path of the sound file. 


à WAC VEY Insert video in the web page by <embed> tag || 


* We insert the video inside the web page, by using the 


- Creating a web page that when it is opened in 


| ا 


the browser "Internet Explorer” the sound file <embed> tag. 
"Egypt.MP3" is played. ® The <embed> tag supports the video file of the type (swf - 
avi - mov). 
- Do the next steps: * We insert the video inside the web page, by using the 
(1) Open the previous text file. «embed» tag and the property src. 
136 137 
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® In case we save the video file with the web page file in the 
same folder, the property src takes the video file name value 
and its extension. 


© In case, there is a file video in another folder, we must write 
the complete path of the video file. 


~ Create a web page which contains the video 
file “internet.avi", that we can play inside it. 


(1) Open the previous text file. 
(2) Modify the code as the following: 
<embed src = “internet.avi"> 


(3) Save the text file with the htm extension. 
(4) Open the web page fil in the Intemet Explorer. sy 


Gs] 


5 = a 


The web page in the browser Hyperlink — 


- First: Complete the next steps to create a web page that when 
it is opened in the browser "Internet Explorer" the 
sound file "Egypt.MP3" is played. 

O suna. editor program. 

© Type the structure to create the page using ... 

© Write the tag <bgsound sre = .............> 

o the text file with the .htm extension, 

© Open the web page file in the 

- Second: Put (¥) for right answer and (x) for wrong answer: 

© Property bgcolor is used to control the web page background 

color. € 

D Property Background that relates to the <body> tag. ( 

© To insert image in the web page, we use <font> tag. ( 


D To puta text in the middle of the line, we use «br» tag. ( 


© When you display the image file by the Internet browser, must be 
image file exist inside the web page folder. C 5 


لها 
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ert iniswer Irom between the brackets:‏ سل 
bo a; 8.‏ هقاس ebê video ined de web page, by‏ © 
(<background> - <bgsound> - <embed> - <bgcolor>)‏ 
By using the ........ tag, we can insert the sound as a background‏ © 
to the web page to listen to it when we download the web page by‏ 
the browser. (<br> - <bgsound> - <embed> - <bgcolor>)‏ 
In case we save the video file with the web page file in the‏ © 
same folder, the property ......... takes the video file name value‏ 
and its extension. (img - sound file - src - video file)‏ 
D The <embed> tag supports the .... of the type (.swf - avi - .mov).‏ 
(image file - sound file - text file - video file)‏ 
We must write the‏ ,. 


© incase, there is a file sound in another ... 
complete path of the sound file. 
(sound file - file - text file - folder) 


- Fourth: What is meant by each of the following sentence: 
© <bgsound src = "Egypt.Mp3"> 

© <body bgcolor = "red"> 

© <embed sre = "intemetavi"- 

O مدرستى جميلة ونظيفة ومتطورة <ا>‎ </b> 

© <body> My School </body> 

~ Fifth: Matching from column (A) for column (B): 


ight — | A | Choose the font type 


2 Face B | Center the text in the middle of the image. 
3| <> | © | Align the image to the right. 

[4| Middle [D | The text is positioned align top the Image. 
S| Top | E | to make the words underline 


Fome work Spsg 


- First: Put (¥) for right answer and (x) for wrong answer: 
© The «embed» tag supports the video file of the type (awf - .avi — 


mov). € ) 
page in two lines. € 2 
© In case, there is a file sound in another folder, we must write the 
complete path of the sound file. C 3 
© We insert the video inside the web page, by using the 
<background> tag. € ) 


© By using the <embed> tag, we can insert the sound as a 
background to the web page to listen to it when we download the 
web page by the browser. ¢ » 

© in case we save the video file with the web page file in the 

same folder, the property img takes the video file name value 
and its extension. t 5 
lete the followi 


© «Font face = "Andalus" color = "red" size = "6"> <... 
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| Insert hyperlink in the web page by the 


<a>...</a>tag 


Hyperlink 


* It is a hyper image or a hypertext, connected to a title and 


when we click it, we move to this title and it can be in the 
same page or in another one, in the same site or in another one. 


= Do the next steps: 
IA] Download the Ministry of Education web site. 
B] Search inside the site pages for hyperlinks (hypertext or | 
hyper image). 
IC] Follow these hyper texts and images by clicking on them. | 
[D] The different shapes of hyperlinks: 
(1) In the same page, among the site pages. | 
(2) Between site page. | 


(3) Hyperlink with another page in another site. 


mz —— GU n 


| hyperlink j 


# To insert a hyperlink, we use "href" property to the <a>. 
* The value of the Href property is the desired address to go. 
- To insert Hyperlink: 


<a href = "the needed we want to move to" >- 
| C Text or image linked with the title </a> 


| [Ee href ="the needed title, we want to move to"> the text or image </a> 


E 


* To insert a hyperlink text (hypertext) by href property to the 


| <a> tag. 
- 


- Create a web page that contains a hyperlink text 
"Ministry of Education". 

| - When we click on it, it moves to the main homepage 

of the Ministry. 


- Type the code of the web page as follows: 


ب 


(The address of the Ministry rs as a hypertext! 
site that we need to move to | |in the browser 


Insert hyperlink text by the <a>...</a> tag 


Hyperlink: <a href: >... «a 


Gs) 
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uestions €» 


- First; Put (7) for right answer and (*) for wrong answer: 


© To insert a hyperlink text, use the <a> tag. t $ 


© To create a hypertext, display the image by <img> tag. (  ) 

© To change the direction of the web page using the background 
property. ( 1 

© By using the bgcolor tag, we can insert the sound as a background 
to the web page to listen to it when we download the web page by 


the browser. € } 

© Property (href) is belong to the <a> tag. ( ) 

© In case, there is a file video in another folder, we must write the 
complete path of the video file. c 3 


- Second: Choose the correct answer from between the brackets: 
@ In code: <a href = "myschool.htm" > «img src = "tools.jpg"> </a> 
appears as a hyper image in the browser. 
(img - toolsjpg - ahref - sm) 
. is a hyper image or a hypertext, connected to a title and 
when we click it, we move to this title 
(hyperlink - img - ahref - sre) 
tag is the end of the <a>. 
(<a> - </body> - <b> - </>) 
© To create a hyper image, display the image by <img> tag and Put 
<img> inside 1o make it a hyperlink. 
(<b>...</b> - <a>...</a> - <u>...</u> - <i>...</i>) 


© The.. 


place where we write the content that will appear 
inside the web page. 
(hyperlink - body - ahref - head) 


> hire: Wh 
© <a href = "myschool.htm" > <img src = "toolsjpg"» </a> 

© <a href = "http:/www.moe.gov.eg” > the Ministry of Education </a> 
© <body bgcolor = "green"> 

© <body dir = "RTL" > 

© <font color = "red" > Arabic Republic Of Egypt </font> 

- Fourth: Re-Arrange the next steps to create a hyper text, when 

we click on it, it moves to the main homepage of the Ministry: 

€) Click the hypertext in the web page. 

(o) Starta text editor program. 

)  ( The Ministry of Education site is loaded. 

( 

( 


E mont uy ence qs vus voe vescescer. 


) Save the text file with .htm extension. 
) Write the following code: 
<a href = "htp;//www.moe.gov.eg" > the Ministry of Education </a> 
( /— ) Open the web page in the browser, to display the image in 
the web page. 
- Fifth: Matching from column (A) for column (B): 


Finishing the current line and start a new 
line. 


To create a hyperlink. 

3| <br> [C [To add sound or video to the web page. 
Written at the beginning of the code to 
refer that the document is written by html. 


g | To insert sound as a background to the 
[6| me web page. 


Gs) 
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= First: for right answer and (x) for wrong answer: 
© in case you don't use the «font» tag, the font color displays 
on the web page with the default color. CD 
© <img background = "imagel jpg" t 5 
© Property (href) is belong to the <a> tag. C 2 
© To insert a space between words in the browser, use &nbsp( — ) 
© We use <a>, to create a hyperlink. ) 0 
© We use <Bgsound> tag to insert sound as a background to the 
web page. ©) 
© HTML tag written at the beginning of the code to refer that the 
document is written by html. 23 
@ To insert a hyperlink text, use the <a> tag. ©) 
© in case, there is a file video in another folder, we must write the 
complete path of the video file. € $ 
z Second: Matching from column (A) for column (B): 


A | Align the image to the left. 


Choose the font size. 


To change the diréction of the web page 
content from right to left. 


To change the direction of the web page 
content from left to right. 


The text is positioned align top the image 


5 Size 


B 
c 
4 | "لماعم‎ | D 
E 
F 


Make the text italic. 


Gs) 


z Third: Complete the followii H 
© <a href= "myschool.htm" > <img sre = "tools.jpg"> <. 
7250" width = "380 


@ After using the close </font> tag, this finishes the effect of the 
«font» tag on any text, written later. 


[A] <a href> [B] </font> 
[C] <center> [D] <b> 
© Center the text in the middle of the image. 
[A] <fon> [B] </font> 
[C] <center> [D] <br> 
© <.......= "hupiwww.moe.gov.cg" > the Ministry of Education </a> 
[A] <a href> [B] </font> 
C] <center> [D] pixel 


© We use the measurement unit ". to measure the image 


dimensions. 


[A] <> [B] </font> 
[C] <center> [D] pixel 

© We use the . tag to start writing in a new line. 
[A] <> [B] </font> 
[C] <center> [D] pixel 

© Property ....... is used to control the web page background color. 
[A] img [B] sre IC] <br> [D] bgcolor 

Gs) 
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Questions | 


Py 


wV— ee ee ع‎ ad 
-~ The answer: 


(1) Open the previous text file. 

(2) Type the structure to create the page using HTML tags. 

(3) Type the text "Egypt" inside the body section as the 
following: <body> Egypt </body> 

(4) Save the file with the name "school. htm". 

(5) Open the file "school.htm" using the internet explorer to see 
the outcome of the tags vou have typed. 


[2] Create a web page with align right, and contains the text 
"مدرستى جميلة ونظيفة ومتطورة"‎ with Andalus face, red color 
and size 6. 
- Use the following code: 
<body dir = "ri 
<font face = "Andalus" color = "red" size = "6" > 
مدرستى جميلة ونظيفة ومتطورة‎ 
</font> 
</body> 
[3] Format the font in the web page to make the phrase 
"مدرستى جميلة ونظيفة ومتطورة"‎ underline. 
- Use the following code: 
>< مدرستى جميلة ونظيفة ومتطورة‎ </y> 
[4] Format the font in the web page to make the phrase: 
"مدرستى جميلة ونظيفة ومتطورة"‎ italic, 
- Use the following code: 
<i> مدرستى جميلة ونظيفة ومتطورة‎ </i> 


Ga) 


ee ee م ااا‎ 
"مدرستى جميلة ونظيفة ومتطورة"‎ bold. 
- Use the following code: 
>< مدرستى جميلة ونظيفة ومتطورة‎ </b> 
[6] Use the property bgcolor for selecting the green color as the 
web page background. 
- Use the following code: <body bgcolor = "green"> 


[7] Use the property Background for adding an image 
"image.jpg" as a web page background. 
- Use the following code: <body Background = "image,jpg"> 


18] Insert image file "school jpg" in the web page. 

- Do the next steps: 

(1) Prepare an image file. 

(2) Save the file image with the name "school jpg" inside the 
same folder that is saved in the web page. 

(3) Start a text editor program. 

(4) Write the necessary code. <img src = "school.jpg"> 

(5) Save the file with the "htm" extension. 

(6) Open the file "Web page" using the internet explorer. 


[9] Insert the image and make its dimensions as follows: 
Height = "450" pixel, and Width = "800" pixel. 
- Use the following code: 
<img sre = "school.jpg" height = "450" width = "800"> 
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- Use the following code: «title» Egypt </title> 


111] Creating a web page that when it is opened in the browser 
"Internet Explorer" the sound file "Egypt.MP3" is played. 
- Use the following code: <bgsound src = "egyptimp3"> 


[12] Create a web page which contains the video file 
"internet.avi", that we can play inside it. 
- Use the following code: «embed src = "internetavi"»- 


[13] Create a web page that contains a hyperlink text "Ministry 
of Education". When we click on it, it moves to the main 
homepage of the Ministry. 

Do the following steps: 
11) Start a text editor program. 
2) Write the following code: 
<a href = "http;/sww.moe.gov.eg"" the Ministry of Education </a> 
3) Save the text file with .htm extension. 
4) Open the web page in the browser. 
5) Click the hypertext in the web page. 
6) The Ministry of Education site is loaded. 


14] Create a web page that contains a hyperlink image. 
When we click the image, we move to the web page 
"My school”. 

Use the following code: 

ia href = "myschool.htm"> <img src = "tools.jpg"> </a> 
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[15] Add the text "My School" as a title to the web page. 
- Do the next steps: 

(1) Start a text editor program, such as Notepad. 

(2) Type the structure to create the page using HTML tags. 

(3) In the field <head>...</head> Type the tag: <title> مدرستى‎ </title> 

(4) Save the file with the name "school.htm". 

(5) Open the file "school.htm” using the internet explorer 


[16] Change the direction of the content of the web page from 
right to left: 
- Use the following code: <body dir = "rtl"> 


[17] Type the following text so that it appears on the web page 
on two lines: 
- School: Write your school name. 
- Name: Write your name. 
- Use the following code: 
<body dir = "rtl"> 
School: Write your school name. 
<br> Name: Write your name. 
</body> 
[18] Make the phrase "School location" appears in the middle 
of the line. 
- Use the following code: <center> School location </center> 


[19] Write the phrase "School Website" and putting four spaces 
between the two words, using &nbsp; symbol. 
- Use the following code: 
School &nbsp; &nbsp; &nbsp; &nbsp; Website 
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* Itis site on the internet that consists of a webpage or more, it is visited 

through a certain web address. 
Web Page: 

* It is a document with electronic content on the internet which can be 
shown through a web browser. 
Home Page: 

* Itis the opening page in the website through which other pages can be 
visited, 
Static Webpage: 

* The content of these page is previously prepared by the page developer. 

* The content doesn't change and can't be edited by the visitor, 

* Itis designed by HTML code. 
Interactive Webpage: 

* It is a webpage that has a content allowing the visitors to interact with and 

‘manipulate. 

* This type is designed by HTML, JavaScript, PHP and others. 
Components of the web page: 

* The web page includes texts, images, audio files, videos and hyperlinks. 
Examples of interactive web pages: 

* The e-learning page on the Ministry of Education websi 

* The contact us page on the Ministry of Education Website. 


B 
- Designing and creating websites has many stages: 
` Stage one: planning. 
‘Setup a simple diagram on paper for the homepage and the site pages. 
Decide the data and information to be used in the webpage. 
‘Stage two: Design the format and shape of the homepage and web 
ages. 
Design the page format. - Select the background color. 
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- Select the places to add text files, images, videos and sound files. 

- Create the hyperlinks connecting the pages. 

* Stage Three: Prepare and develop. 
Design the web page is the most important stages where: 

- Prepare the text which will be added to the page using a text editor 
program and save it in a folder. 

- Prepare the image files and save them in a folder. 

- Prepare the video and audio files and save them in a folder. 

* Stage Four: Implementation. 

- This is done using a programming language and HTML codes. 

- Convert the design into webpage. 

~ Input the data and files. - Create the hyperlinks. 

* Stage Five: Publish the website on the internet. 

~ Choose a title, select a web address. 

~ Decide the storage capacity on a server. - Pul 


- There are many programs that are used on dealing with audio files. 

- They are software programs that enable the user to create and process 
audio files in an easy and proper way. 

Creating an audio file: 

- To create an audio file, we need a sound processing software, 

-~ You can create an audio file containing audio clips and the words required 
as well as adding different effects on the audio, and then save the audio 
ina file, 
® Next steps for creating an audio file: 

First: the setup and processing to create an audio file. 

Second: the implementation stage. 

Third: modifying the sound (or audio clip). 

Fourth: Export an audio file with an appropriate extension, 

(1) Setup and preparing to create an audio file stage Include: 

- All the data that will be audio recorded. 

- Make sure of the software components (install one of the programs of 
creating and audio processing on computers in the lab). 


‘on the internet. 
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-~ Audacity program that can be run on different operating systems like 


(Windows Linux). - You can download the program through the website: 


7772 7 7 0ص 

- Ensure the hardware components (connecting the microphone "Mic" to 

a computer). 
- Using the "Audacity" program to create and audio processing which is an 
open-source software. 

(2) The implementation stage to create a sound file includes: 

- Load a setup and sound processing software. 

- Click "Record" button to record voice. © 

~ Insert text data by the microphone. 

-To finish recording, click "stop". (Œ - 

- To listen to the audio through the speakers, click "play". (> ) 

(3) Add an effect on the audio clip: 

(1) Audio playback by clicking "Play button" and listen to it. 

(2) Select the desired audio clip to which you want to add the effect, by 
pressing and dragging on the audio clip using the Reading pointer at 
the Timeline 

(3) From "Effect" menu, select one of the desired effects. 

(4) Rerun the audio by clicking play button and listen to the audio clip 
after adding the effect. 

© Cut and paste an audio clip 

(1) Select the audio clip you want to cut. 

(2) From "Edit" menu select "Cut". 

(3) Move the pointer on the timeline to the desired place to paste the audio 
clip. 

(4) From the "Edit" menu select” Paste”. 

© To delete an audio section: 

Select the audio section you want to delete. 

Press "Delete" from the keyboard. 

(4) To export an audio file with an appropriate extension: 

(1) From the "File" menu, select "Export Audio". 
(2) Select the appropriate extension of the audio file. 
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* Audio "WAV" file: 

- The sound of a WAV file extension is characterized by: 

- The sound high quality and clarity. 

- It has a large storage capacity. 

- Itis not appropriate for publication via websites. 
© Audio "MP3" file: 

~ Audio MP3 file, the sound is of less purity, compared with the file with 
WAV extension. 

= It has less storage capacity. 

- It is appropriate for publication via websites. 


Topic (4)] /‏ كر 

-There are many programs that can be used in creating and editing video: 
files like: "Kdenlive" and "OpenShot". 

-They are open source and free to use. 

~ They are easy to operate with Linux and Windows. 

- Movie Maker program is used to process video files, runs in Windows. 

~ Kdenlive and OpenShot programs and other ones can be downloaded 
online. 

- You can download the OpenShot program through the websi 


bitps/ferwwopenhot.org 
To create a video clip: 


(1) Import files (images - sound) into the program. 
(2) Put images in order on the program Timeline. 
(3) Import a sound file to the program. 
(4) Preview the video. 
To save a video project: 
(1) Create a Project Folder and name it in English, on one of the drives. 
(2) Put all the files, sound, images, cte., in the project folder. 
3) Save the Project file and name it in English from the Main Toolbar, open 
File menu and select Save Project As. 
(4) Save the project file in the Project Folder. 


Edit the Video Clips by 
(1) Control the length of the video clip timc. 
(2) Add Effects to the video clip. 

(3) Add Transitions to the clip. 

(4) Add text to the clip. 
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(5) Open the file “school.htm” using the internet explorer to see 
the outcome of the tags you have typed. . 
- To add a text "منرستى جميلة ونظيفة ومتطورة"‎ to the content of the web page: 
body» مدرستى جميلة ونظيفة ومتطورة‎ <body> 
- We have to change the direction of the page to make the content from right 
to left, to suit the Arabic language when designing a web page with 
Arabic view. 
- We specify the direction of the web page according to the value of the 
property "dir", "rl" or "It^, 
~ We use the <br> tag to display the text in the web page in two lines. 
- To puta text in the middle of the line, we use <center> tag. 
«center? school location </center>, 
~ We use the symbol "&nbsp:" to control the number of spaces between 
words. 
7 We repeat it according to the number of the needed spaces between words. 
- Format the font in the web by <font>...</font> 
© Formatting the font in the web page (font type, font size, font color 
and font style). 
- The <font tag has a group of properties as follows: 


Choose the font type. 

Choose the font color. 

Choose the font size. 

-To change the font size: The browser identifies seven different font sizes 
that we choose by the property "size" the value is from "1" to "7". 

<font face = "Andalus" color = "red" size = "6" > منرستى جميلة‎ </font> 

® In case you don't use the «font» tag, the font displays on the web page 
with the default shape. 

$ In case you don't use the «font tag, the font color displays on the web 
page with the default color. 

© In case you don't use the <font> tag, the font size displays on the web 
page with the default size. 

® After using the close </font> tag, this finishes the effect of the «font» tag 
on any text, written later. 
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Color 
Size 
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$ Format the font in the web page to make the phrase: 
"مدرستى جميلة ونظيفة ومتطورة”‎ underline, italic or bold. 

© To select the color of the web page background, use the property bgcolor 
that relates to the <body> tag. <body bgcolor = "green"> 

- Use the property Background for adding an image as a web page 
background. <body Background = "image.jpa"> 

- Use the property Background for adding an image as a web page 
background. 

- Write the tag <body Background = "imagejpg"> 

‘© To insert image in the web page, we use the property sre that connects to 
the <img> tag. < img sre = "imagejpg"> 

| = Inthe following code: «img src = "school,jpg”> 

** The image file and the web page file must be in the same folder, so we 
write the image file name and its extension with the property sre. 

* In case, there is a file image in another folder, we must write the 
‘complete path of the image file. 

= We control the image dimension through the properties (height) and 
(width) that relate to the <img> tag as follows: 

* Height property is used to select the image height. 

‘© Width property is used to select the image width. 

* We use the measurement unit "pixel" to measure the image dimensions. 

‘The following table has the values of the Align property. 


Right | Align = "Right" | Align the image to the right. 
Let | Align = "Left" | Align the image to the left. 
Middle | Align = "Middle" | Center the text in the middle of the image. 
Bottom | Align = "Bottom" | The text is positioned align down the image. 
Top | Align = "Top" | The text is positioned align top the image. 


- img sre = "school.jpg" align = "middle" 

~ To align the image to the right of the web page, the code is align = "right" 

- To align the image to position the text to the top of the image, the code is 
align = "top". 
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To control the time length of the video clip: 


(1) Define the time length of the clip on the timeline. 
(2) Drag and drop the head of the play indicator and move it until it goes to 


the right place on the timeline. 
* Right click the clip Track, a drop box appears: 
- Select Slice Clip to split the clip into two slides. 
(a) Keep Both Slides, the right and left slides are kept. 
(b) Keep the left slide. 
(©) Keep the right slide. 
Add Effect to a video Clip: 
(1) Click the Effects tab. 
(2) Drag and drop an effect to add it to the clip. 
(3) The effect sign appears on the cli 
(4) Preview the video. 
~ To read the effect name put the cursor on the effect sign. 
- To delete the effect, right click the effect sign and select "Remove Effect". 
To add Transitions to a video clip: 
(1) Click the Transitions tab. 
(2) Drag and drop one transition and add it to the clip. 
(3) Control the transition time length by drag and drop it to increase or 
decrease it. 
(4) Add a transition at the beginning and at the end of the clip. 
(5) Preview the video. 
To add text to a video clip: 
(1) From Title menu, select Title, 
(2) Fill in the dialog box. 
(3) Press "Save button" to save text in a file. 
(4) Name the text file in English. 
(5) The text file is found in "Project Files". 
(6) Adá text file to the video clips by drag and drop the text file and add it to 
a track. 
^ To export a video to a file with suitable extension: 
(1) Press "Export Video", a dialog box will appear, 
(2) In the dialog box of "Export Video", select the following: 
(a) File Name. 


(b) Folder Path. 
(c) Extension of the Target video File. 
(@) Decide the Quality level. 

(3) Export the video by pressing "Export Video button". 
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- HTML is a coding language used to create internet pages which are used 
through an internet browser. 
-HTML codes: 
~To create a web page, HTML codes are used, these codes are called Tags. 
- An internet browser executes these tags on the browser page. 
- Steps to create a web page using HTML tags: 
(1) Create a text file using a text editor to write and edit the HTML tags. 
(2) Write HTML tags in capital or small letters. 
(3) Write the HTML tags between these signs "<" 
(4) Write most of the tags with a start ">... >" and an end "</....>". 
5) Save the text file with the HTML tags with „htm or .html extension. 
(6) Open the saved file using a web browser and notice the result. 
~ In the structure to create a web Page using HTML tags: 
- Type <html> at the beginning of the tags to refer that the document is 
written in „html 
- The HTML tag is divided into two parts: 
(1) head: the part where the page information is typed for the browser. 
(2) body: the part where the content is written. 
= You can write the HTML tags with Capital letters or Small letters, 
- The internet explorer isn't affected by the let spaces in the file or by 
moving to a new line by pressing the enter key. 
- To add the text "=" as a title to the web page: 
(1) Start a text editor program, such as Notepad. 
(2) Type the structure to create the page using HTML tags. 
(3) In the field <head>...</head> Type the tag: «title» مدرستى‎ </title> 
(4) Save the file with the name "school.htm*. 
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when we download the web page by the browser.‏ 
We insert the sound as a background to the web page using <bgsound>‏ $ 
and the property sre.‏ 
The "Internet Explorer" is the only browser that supports the<bgsound>‏ ® 
tag to insert the sound as a background to the webpage.‏ 
In the following code: «bgsound sre = "egypt.mp3">‏ - 
In case we save the sound file with the web page file in the same folder,‏ ® 
the property src takes the sound file name valuc and its extension.‏ 
Incase, there is a file sound in another folder, we must write the‏ 
complete path of the sound file‏ 
We insert the video inside the web page, by using the <embed> tag.‏ ©‘ 
The <embed> tag supports the video file of the type (swf - avi - mov).‏ $ 
We insert the video inside the web page, by using the <embed> tag and‏ 
the property sre.‏ 
In case we save the video file with the web page file in the same folder,‏ © 
the property src takes the video file name value and its extension,‏ 
In case, there is a file video in another folder, we must write the‏ ® 
complete path of the video file. <embed src = "“internet.avi">‏ 
Hyperlink is a hyper image or a hypertext, connected to a title and when‏ ~ 
we click it, we move to this title and it can be in the same page or in‏ 
another one, in the same site or in another onc.‏ 
To insert a hyperlink text (hypertext) by href property to the <a> tag.‏ ® 
Start a text editor program.‏ )1( 
Write the following code:‏ )2( 
</a>‏ وزارة التربية والتعليم > <a href = "http;//www.moc.gov.eg"‏ 
(G) Save the text file with „htm extension.‏ 
Open the web page in the browser.‏ )4( 
Click the hypertext in the web page.‏ )5( 
The Ministry of Education site is loaded.‏ )6( 
To create a hyper image:‏ ® 
Display the image by <img> tag.‏ )1( 
Put <img> inside «a»...«/a» to make it a hyperlink.‏ )2( 
The steps of creating and executing a hyperlink image:‏ © 
Start a text editor program. (2) Write the following code:‏ )1{ 
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<a hrel 


_myschooLhtm > <img src= ong > </a> 


(4) Open the web page in the browser. 
(5) Click the hyper image in the web page. 
(6) The web page "My school" is loaded. 


‘Written at the beginning of the code to 
<himt> | refer that the document is written by 
‘A place where we write the web page 
<head> | title to the browser. 
‘A place where we write the content that | Dir — bgcolor — 
<body> | will appear inside the web page background 
<title> | Choose a title to the web page. 
e FoR de cures Kot اود‎ 
<center> | To add a text in the middle of the line 
nbsp; lasers specu between وه‎ 
<font> | To control the font format. Face-color-size 
E Underlined. 
<b> Bold. 
<i> Italic. 
؟‎ EEE Sre— height — 
<img> He are ee oe det e 
Sponsa» | Te mir sound as a background to the m 
<embed> | To add a sound or video to the web page. Sre 
<a> To create a hyperlink. Href 
To input data through the web page by 
Input» | different ways depending on the Type 
property value type. 
form» | Create a model in thc web page. Action. 
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